0

Um objeto por padrão é alinhado a esquerda da tela. Gostaria de saber como alinho uma imagem na direita da tela, de forma que quando eu altero o tamanho da janela a imagem permaneça "encostada" no canto direito da tela, sem ser cortada, segue abaixo meu andamento com o código, o emoji esta a direita da tela, porém quando eu diminuo a largura da janela do navegador o emoji fica la e fica oculto. O que eu estou tentando fazer é que a posicao dele seja corrigida automaticamente para que ele sempre fique encostado no canto direito da janela, o que ocorre naturalmente no canto esquerdo da janela.

Código:

<!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>

Antecipadamente agradeço quem ler e puder responder!

1
  • Nenhuma, so estou tentando achar uma ferramenta para alinhar a imagem na direita da tela, so isto mesmo, acho q o CSS e o Bootstrap pode resolver 1/09/2016 às 16:43

3 Respostas 3

3

Um siples float: right resolve ou com position: absolute; right: 0;

O seu maior erro ai é o left:100%;, vale lembrar que a "ancora" da imagem no css é no canto superior esquerdo. O left:100%; vai empurrar a imagem para a esquerda com 100% do tamanho da tela, e como a ancora é na esquerda, ela fica fora da tela e aparece o scroll horizontal.

Segue 2 exemplos, com float e 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">

2

Faça desta forma abaixo vai vai dar certo:

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

Abraços.

0

Amigo, você não precisar utilizar um framework para fazer apenas isso. Você precisa apenas usar essa propriedade: float:right;

E a imagem vai se deslocar para a direita.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .