Comment conserver le rapport hauteur / largeur lors de la mise à l'échelle de l'image en utilisant une dimension (CSS) dans IE6?

Voici le problème. J'ai une image:

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

Notez qu'aucune hauteur ou largeur n'est spécifiée.

Sur certaines pages, je souhaite afficher uniquement une vignette. Je ne peux pas modifier le html, j'utilise donc le CSS suivant:

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

Ce qui (dans la plupart des navigateurs) crée une page de vignettes uniformément larges, toutes avec des proportions préservées.

Dans IE6 cependant, l'image n'est mise à l'échelle que dans la dimension spécifiée dans le CSS. Il conserve la hauteur «naturelle».

Voici un exemple de paire de pages illustrant le problème:

• La liste, qui devrait afficher des miniatures
• Un seul article de blog, qui montre l'image en taille réelle.

Je serais très reconnaissant pour toutes les suggestions, mais je tiens à souligner que (en raison des limitations de la plate-forme choisie par les clients) je recherche quelque chose qui n'implique pas de modifier le html. CSS serait également préférable à javascript.

EDIT: Doit mentionner que les images sont de tailles et de rapports d'aspect différents.

Adam Luter m'a donné l'idée de cela, mais cela s'est avéré être très simple:

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

IE6 redimensionne maintenant l'image correctement et cela semble être ce que tous les autres navigateurs utilisent par défaut.

Merci pour les deux réponses!

Je suis content que cela ait fonctionné, donc je suppose que vous avez dû définir explicitement «auto» sur IE6 pour qu'il imite les autres navigateurs!

En fait, j'ai récemment trouvé une autre technique de mise à l'échelle des images, à nouveau conçue pour les arrière-plans. Cette technique a quelques caractéristiques intéressantes:

1. Le rapport hauteur / largeur de l'image est conservé
2. La taille d'origine de l'image est conservée (c'est-à-dire qu'elle ne peut jamais rétrécir, mais s'agrandir)

Le balisage repose sur un élément wrapper:

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

Compte tenu du balisage ci-dessus, vous utilisez ensuite ces règles:

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

Si vous contrôlez ensuite la taille de l'emballage, vous obtenez les effets d'échelle intéressants que j'ai énumérés ci-dessus.

Pour être explicite, considérez l'état de base suivant: Un conteneur de 100 x 100 et une image de 10 x 10. Le résultat est une image à l'échelle de 100x100.

1. À partir de l'état de base, le conteneur est redimensionné à 20x100, l'image reste redimensionnée à 100x100.
2. À partir de l'état de base, l'image passe à 10x20, l'image est redimensionnée à 100x200.

Donc, en d'autres termes, l'image est toujours au moins aussi grande que le conteneur, mais évoluera au-delà pour conserver son rapport hauteur / largeur.

Ce n'est probablement pas utile pour votre site et cela ne fonctionne pas dans IE6. Mais, il est utile d'obtenir un arrière-plan mis à l'échelle pour votre port de vue ou votre conteneur.

Eh bien, je peux penser à un hack CSS qui résoudra ce problème.

Vous pouvez ajouter la ligne suivante dans votre fichier CSS:

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

Le code ci-dessus ne sera vu que par IE6. Le rapport hauteur / largeur ne sera pas parfait, mais vous pourriez lui donner un aspect quelque peu normal. Si vous vouliez vraiment le rendre parfait, vous auriez besoin d'écrire du javascript qui lirait la largeur de l'image d'origine et de définir le rapport en conséquence pour spécifier une hauteur.

La seule façon de faire une mise à l'échelle explicite dans CSS est d'utiliser des astuces telles que celles trouvées ici .

IE6 uniquement, vous pouvez également utiliser des filtres (consultez PNGFix ). Mais les appliquer automatiquement à la page nécessitera du javascript, bien que ce javascript puisse être incorporé dans le fichier CSS.

Si vous avez besoin de javascript, vous voudrez peut-être simplement que javascript remplisse la valeur manquante pour la hauteur en inspectant l'image une fois le contenu chargé. (Désolé je n'ai pas de référence pour cette technique).

Enfin, et pardonnez-moi pour cette boîte à savon, vous voudrez peut-être éviter le support IE6 dans cette affaire. Vous pouvez ajouter _width: autoaprès votre width: 75pxrègle, afin qu'IE6 rende au moins l'image de manière raisonnable, même si elle est de la mauvaise taille.

Je recommande la dernière solution simplement parce que IE6 est en voie de disparition: 20% et en baisse de près d'un pour cent par mois . Aussi, je note que votre site est récréatif et au Royaume-Uni. Ces deux éléments aident la population démographique à s'éloigner d'IE6: l'utilisation d'IE6 baisse de près de 40% le week-end (aucune citation désolé), et le Royaume-Uni a une démographie IE6 beaucoup plus faible (encore une fois, aucune citation, désolé).

Bonne chance!