Como preservar a proporção ao dimensionar a imagem usando uma dimensão (CSS) no IE6?

Aqui está o problema. Eu tenho uma imagem:

<img alt="alttext" src="filename.jpg"/>

Observe nenhuma altura ou largura especificada.

Em certas páginas, quero mostrar apenas uma miniatura. Não consigo alterar o html, então uso o seguinte CSS:

.blog_list div.postbody img { width:75px; }

O que (na maioria dos navegadores) torna uma página de miniaturas uniformemente largas, todas com proporções de aspecto preservadas.

No entanto, no IE6, a imagem é dimensionada apenas na dimensão especificada no CSS. Ele mantém a altura 'natural'.

Aqui está um exemplo de um par de páginas que ilustra o problema:

• A lista, que deve mostrar miniaturas
• Uma única postagem no blog, que mostra a imagem em tamanho real.

Ficaria muito grato por todas as sugestões, mas gostaria de salientar que (devido às limitações da plataforma escolhida pelos clientes) procuro algo que não implique modificar o html. CSS também seria preferível a javascript.

EDITAR: Deve mencionar que as imagens são de tamanhos e proporções diferentes.

Adam Luter me deu a ideia para isso, mas na verdade acabou sendo muito simples:

img {
  width:  75px;
  height: auto;
}

O IE6 agora dimensiona bem a imagem e isso parece ser o que todos os outros navegadores usam por padrão.

Obrigado por ambas as respostas!

Estou feliz que funcionou, então acho que você teve que definir explicitamente 'auto' no IE6 para que ele imite outros navegadores!

Na verdade, recentemente encontrei outra técnica para dimensionar imagens, novamente projetada para fundos. Esta técnica possui alguns recursos interessantes:

1. A proporção da imagem é preservada
2. O tamanho original da imagem é mantido (ou seja, ela nunca pode encolher, apenas aumentar)

A marcação depende de um elemento wrapper:

<div id="wrap"><img src="test.png" /></div>

Dada a marcação acima, você usa estas regras:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

Se você controlar o tamanho do invólucro, obterá os efeitos de escala interessantes que listo acima.

Para ser explícito, considere o seguinte estado base: Um contêiner de 100 x 100 e uma imagem de 10 x 10. O resultado é uma imagem em escala de 100x100.

1. Começando no estado básico, o contêiner redimensionado para 20x100, a imagem permanece redimensionada para 100x100.
2. Começando no estado básico, a imagem é alterada para 10x20 e é redimensionada para 100x200.

Em outras palavras, a imagem é sempre pelo menos tão grande quanto o contêiner, mas será dimensionada além dele para manter sua proporção.

Isso provavelmente não é útil para o seu site e não funciona no IE6. Porém, é útil obter um plano de fundo dimensionado para sua porta de visualização ou contêiner.

Bem, posso pensar em um hack CSS que resolverá esse problema.

Você pode adicionar a seguinte linha em seu arquivo CSS:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

O código acima só será visto pelo IE6. A proporção não será perfeita, mas você pode fazer com que pareça um tanto normal. Se você realmente quisesse torná-lo perfeito, precisaria escrever algum javascript que pudesse ler a largura da imagem original e definir a proporção de acordo para especificar a altura.

A única maneira de fazer escalonamento explícito em CSS é usar truques como os encontrados aqui .

Apenas no IE6, você também pode usar filtros (confira PNGFix ). Mas aplicá-los automaticamente à página precisará de javascript, embora esse javascript possa ser incorporado ao arquivo CSS.

Se você vai precisar de javascript, pode querer apenas que o javascript preencha o valor ausente para a altura inspecionando a imagem assim que o conteúdo for carregado. (Desculpe, não tenho uma referência para esta técnica).

Finalmente, e perdoe-me por esta palestra, você pode querer evitar o suporte do IE6 neste assunto. Você pode adicionar _width: autodepois de sua width: 75pxregra, de modo que o IE6 pelo menos renderize a imagem de maneira razoável, mesmo que seja do tamanho errado.

Recomendo a última solução simplesmente porque o IE6 está em declínio: 20% e caindo quase um por cento ao mês . Além disso, observo que seu site é recreativo e está localizado no Reino Unido. Ambos ajudam o demográfico a se afastar do IE6: o uso do IE6 cai quase 40% durante os finais de semana (sem citação, desculpe) e o Reino Unido tem uma demografia do IE6 muito menor (novamente sem citação, desculpe).

Boa sorte!