Imagem auto ajustável com CSS

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.

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

Continuar lendo ... "Imagem auto ajustável com CSS"