Align image to the right of the browser screen

Question

Align image to the right of the browser screen

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

An object by default is aligned to the left of the screen. I would like to know how to align an image on the right of the screen, so that when I change the size of the window the image remains "leaning" in the right corner of the screen, without being cut, it follows below my progress with the code, emoji is on the right of the screen, but when I decrease the width of the browser window emoji stays and stays hidden. What I'm trying to do is have his position corrected automatically so that he's always leaning against the right corner of the window, which occurs naturally in the left corner of the window.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Posicionar um objeto na tela_2</title>
<style type="text/css">
#imgpos {
	position:absolute;
	left:100%;
	top:50%;
	}
</style>
</head>
<body>
<p>Para retornar ao tutorial use o bot&atilde;o &quot;Voltar&quot; do seu navegador.</p>
<img src="https://criemoda.files.wordpress.com/2012/08/sorriso.png"width="220" height="220" alt="logo maujor" id="imgpos">
</body>
</html>

In advance, thank you for reading and answering!

html css

asked by anonymous 01.09.2016 / 18:39

3 answers

1

Do this way below will work:

#imgpos {
	position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
	}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Posicionar um objeto na tela_2</title>
</head>
<body>
<p>Para retornar ao tutorial use o bot&atilde;o &quot;Voltar&quot; do seu navegador.</p>
<img src="https://criemoda.files.wordpress.com/2012/08/sorriso.png"width="220" height="220" alt="logo maujor" id="imgpos">
</body>
</html>

Hugs.

01.09.2016 / 19:00

0

Friend, you do not need to use a framework to do just that. You just need to use this property: float: right;

And the image will move to the right.

01.09.2016 / 18:52

JQuery, initializing with function Make a mark on your Google Maps map

score 1 · Accepted Answer

A% s of% s resolves with float: right

Your biggest mistake here is position: absolute; right: 0; , remember that the "anchor" of the image in the css is in the upper left corner. The left:100%; will push the image to the left with 100% of the screen size, and as the anchor is on the left, it will be off the screen and the horizontal scroll will appear.

Here are 2 examples, with left:100%; and float

#imgpos1 {
  float: right;
}

#imgpos2 {
  position: absolute;
  right: 0px;
}

<img src="https://criemoda.files.wordpress.com/2012/08/sorriso.png"width="220" height="220" alt="logo maujor" id="imgpos1">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- aaqui é so para nao sobrepor por causa do float -->
<img src="https://criemoda.files.wordpress.com/2012/08/sorriso.png"width="220" height="220" alt="logo maujor" id="imgpos2">