menu-inline

Redimensionar imagem no IE com CSS e HTML

  • 06 março 2011 por Luiz Henrique Kuchnir
Devido ao internet explorer não aceitar grande parte das propriedades CSS (como o background-size), vamos precisar fazer um macete para redimensionarmos imagens nele.

Tutorial testado no IE 6, Firefox 3.6, Chrome 9 e Ópera 11.

CSS/HTML no ieImagem por: Marjan Krebelj

Caso queira redimensionar imagens usando CSS (background-size) acesse:

Para começar vamos fazer uma div que conterá a imagem a ser redimensionada:

Créditos: 10calco.blogspot.com
<div id='test'>
 <ul>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

Após a tag UL vamos acrescentar a imagem e vamos definir uma classe para ela através do seguinte código em negrito:

<div id='test'>
 <ul><img class='bg' src='plano_de_fundo.jpg'/>
  <li>
  Texto Texto Texto Texto Texto Texto
  </li>
 </ul>
</div>

No CSS vamos definir o tamanho da div e aplicar z-index igual a 1 ao LI:

#test {
width:500px;
height:100px;
}

#test ul li {
z-index:1;
}

Por último vamos colocar a imagem por trás do texto com z-index igual a -1, definir posição absoluta e deixar a imagem do mesmo tamanho da div:

#test img.bg {
z-index:-1;
position:absolute;
width:500px;
height:100px;/* Créditos: 10calco.blogspot.com */
}


-Nota: Se o tamanho da imagem estiver em porcentagem ela só ficará correta no IE.
[Editado: 08/04/2011] Para resolver esse problema veja: Imagem auto ajustável com CSS.[/Editado]


Conhece algum outro macete ou algum aprimoramento para este? Então poste nos comentários ou entre em contato

Comentários 3 comentários

Anônimo disse...

Foi util pra mim a dica.... valeu!
:D

Anônimo disse...

Tonsmit - q;)

Legal,
Mas como funcionaria no Body da pagina, Para q a imagem se ajuste ao navegado e fique fixa?

Parabéns pelo topico.

outra coisa:
Como deixar somente a cor de fundo da div opaca, sem interferir no resto do conteudo?

Desde já agradesço.

Luiz H. disse...

Olá! Obrigado pelos comentários.
Para centralizar uma imagem no body veja o tutorial sobre redimensionar imagens com css.
Aplique os valores 100% 100% e insira a propriedade background-attachment:fixed; para fixar a imagem.
Sobre a div opaca fique atento que farei um tutorial para explicar.
Até mais.