Align image to the right of the browser screen

Asked

Viewed 7,852 times

0

An object by default is aligned to the left of the screen. I would like to know how to line an image on the right of the screen, so that when I change the size of the window the image remains "leaned" on the right corner of the screen, without being cropped, follows below my progress with the code, the emoji is to the right of the screen, but when I decrease the width of the browser window the emoji Stay there and stay hidden. What I’m trying to do is that its position is automatically corrected so that it always leans 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 I thank those who read and can answer!

html css

  • None, I’m just trying to find a tool to align the image on the right of the screen, just this, I think CSS and Bootstrap can solve

3 answers

2


A siple float: right resolve or with position: absolute; right: 0;

Your biggest mistake there is the left:100%;, remember that the "anchor" image in 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 gets off the screen and the horizontal scroll appears.

The following are 2 examples, with float and position 

#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">

1

Do it this way below will work out:

#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.

0

Buddy, you don’t need to use a framework to do just that. You just need to use this property: float:right;

And the image will shift to the right.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.