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


92

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:

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.


Estou documentando vários bugs. Não consegui reproduzir este. Você acha que poderia fazer um caso de teste simples disso?
meder omuraliev

Para ser honesto, não faço mais muitos webdesigns e não tenho certeza de onde poderia encontrar uma instalação do IE6 sem me preocupar. Vou anunciá-lo embora.
Tom Wright,

Respostas:


197

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!


2
Eu também recomendaria usar: "object-fit: contain;" ou "ajuste ao objeto: preencher;" se isso não for suficiente para você
Magnus

5
@Magnus, de acordo com caniuse.com, o ajuste de objeto CSS3 não é compatível com nenhum navegador atual (no momento em que este artigo foi escrito) e só foi compatível com o Opera. Dificilmente vai funcionar no IE6.
Richard Hauer

Isso também deve funcionar ao contrário? (ou seja, definir altura, largura automática?) Isso funcionará com IEs antigos?
josinalvo

14

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.


3
Se você deseja dimensionar imagens PARA BAIXO em um contêiner com proporção preservada, parece ser max-height e max-width em vez de min-height / min-width, que parecem dimensionar imagens menores para cima.
Karsten

Eu gosto desta resposta e @Karsten está certo sobre max-height e max-width.
Ramsharan,

2

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.


2

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!

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.