Hoje estou vindo com um conteúdo bem simples, mas que ainda gera dúvidas em muita gente, eu mesmo como nunca achei isso na internet há um tempo (talvez por não procurar direito), acabei chutando e conseguindo fazer funcionar.
A pergunta é a seguinte: Como eu faço para que a largura da minha imagem se ajuste sem alterar as dimensões?
O básico é isso:
<img class="imagens-100"
border="0"
src="endereco-da-imagem.jpg"
style="width:100%;
height:auto;
float:left;"
/>
Mas vou aproveitar essa dica para ensinar duas coisas. A ideia é estabelecer o tamanho padrão da imagem nas resoluções mais altas, e quando a resolução da tela for menor do que a imagem, ela se ajuste automaticamente sem criar a barra horizontal.
Eu recomendo que você crie uma class, para usar em todas as imagens que você quiser que tenham o mesmo efeito.
Vamos pra prática?
Antes de tudo, para quem não está familiarizado com o CSS, recomendo colocar dentro do "<head></head>" um "<style type="text/css" > </style>" para colocar o próximo código dentro.
Vamos criar a class no CSS. Coloque o nome da class como preferir, aqui eu vou colocar "imagens-100". A imagem original vai ter 500 pixels de largura.
Vai ficar assim:
.imagens-100 {
width: 500px;
height: auto;
float: left;
}
width: 500px;
height: auto;
float: left;
}
No HTML, você vai colocar a imagem normalmente, mas é importante que tire o "Width" e o "Height", porque o CSS vai determinar esses valores. Se puder deixar exatamente como está no exemplo abaixo, vai facilitar.
<img class="imagens-100"
border="0"
src="endereco-da-imagem.jpg"
/>
Para fazer a imagem se ajustar quando a resolução da tela for menor que a imagem original, basta acrescentar um @media ao final do seu CSS.
@media (max-width: 500px) {
.imagens-100 {
width: 100%;
height: auto;
float: left;
}
}
.imagens-100 {
width: 100%;
height: auto;
float: left;
}
}
VER EXEMPLO FUNCIONANDO
É mais uma dessas coisas simples que parecem complicadas. Espero ter ajudado.
