menu-inline

Imagem auto ajustável com CSS

  • 08 abril 2011 por Luiz Henrique Kuchnir
Fazer com que uma imagem se ajuste automaticamente de acordo com o conteúdo é uma tarefa relativamente fácil se tratando de navegadores que suportam CSS3, para isso, basta dar uma olhada no tutorial sobre background-size. Porém o nosso amigo Internet Explorer não reconhece essa propriedade, e para dar suporte a esse navegador precisamos recorrer a alguns macetes.

Porcentagem
Imagem por: ralphunden


Para redimensionar imagens no IE podemos usar a técnica ensinada em redimensionar imagens no ie com css e html, porém com esse macete, se deixarmos nossa imagem auto ajustável ( com as medidas em porcentagem ) ela funcionará apenas no IE, e ficará desconfigurada nos outros navegadores.
Enfim, se realmente precisarmos de uma imagem auto ajustável "Cross Browser" ( que funcione também no IE ) podemos misturar CSS3 do primeiro tutorial com algumas técnicas do segundo.

O código HTML.

Para começar fazemos uma div e utilizando a tag "img src" colocamos a imagem antes do conteúdo:
<div id='test'><img src='Endereço da imagem'class='bg'/>
 <p> ... conteúdo ... </p>
</div>

O código CSS.

<style type="text/css">
#test {
width:500px; /* Largura fixa para a div */
min-height:200px; /* Altura mínima */
height:auto !important; /* Altura ajustável de acordo com o conteúdo */
height:200px; /* Altura mínima para IE */
background-image: url("Endereço da imagem"); /* Aqui vai a mesma imagem que usamos acima */
background-size:100% 100%; /* Imagem ocupando toda largura e altura da div */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;
-moz-background-size: 100% 100%;
}
#test img.bg {
display:none; /* Escondemos a imagem que está no HTML dos navegadores que suportam CSS3 */
}
 </style>
  • -webkit-background-size, -o-background-size, -khtml-background-size e -moz-background-size tornam o código compatível com diferentes navegadores.
  • background-size e -moz-background-size tem largura e altura especificados para não ocorrer bug no firefox

Estilo para IE.

Agora acrescentamos um código condicional exclusivo para IE.
 <!--[if IE]>
<style type="text/css">
#test {
background:none; /* Escondemos a imagem que está no CSS do IE */
}
#test img.bg {
display:block; /* Mostramos a imagem que está no HTML */
z-index:-1; /* Colocamos ela atrás do conteúdo */
position:absolute; /* Fazemos a imagem não interferir no conteúdo */
width:100%; /* Imagem ocupando toda largura da div */
height:100%; /* Imagem ocupando toda altura da div */
}
 </style>
<![endif]-->

Exemplo.

Imagem auto ajustável
Imagem de fundo por: Freidwall

Se você conhece alguma outra técnica relacionada as CSS ou HTML, deixe um comentário ou entre em contato. E bem-vindo ao mundo das gambiarras.

Comentários 10 comentários

Lucas disse...

Simples, mas extremamente útil.
Obrigado.

Vinni disse...

valeu, muito útil, obrigado mesmo.

Anônimo disse...

Obrigado aew ! Até que enfim conseguir achar isso ! Parabéens, vocês são demais !!!!

Midori-tan disse...

Muito obrigada pelo conteúdo!
Eu gostaria de saber como ajustar uma imagem apenas à esquerda da minha tela. como faço isso? você poderia me ajudar?

Luiz H. disse...

Olá a todos! Obrigado pela visita e pelos comentários.
Para alinhar imagens você pode usar a propriedade background-position: left top;

9inety LTDA disse...

foi muito útil pra mim mano, não usei todo o seu código, apenas uma parte... mas, resolveu um problema muito grave aqui... Deus te abençoe! ABRAÇO

Luiz Siqueira disse...

interessante seu código... mas queria saber como que eu faço para as minhas imagens ficarem lado a lado com espaçamento ocupando a pagina e ao diminuir elas vão auto-ajustando, como por exemplo: quero colocar 6 icones na pagina e que esse icone ocupe o tamanho da pagina em geral, pois o que eu fiz elas só ficam dentro da div mas não ocupam o espaço desejado. tem como ajudar?

Luiz Siqueira disse...

ou alguem se puder ajudar ai eu agradeço

tecnoDRONE Imagens Aéreas disse...

Amigos, e se eu quiser que se ajuste dentro de uma célula de tabela 100%, é possível?

Wellington Esteves disse...

Cara, me salvou ! VLEWW!