Comment conserver le ratio d'aspect lors du redimensionnement de l'image en utilisant une seule dimension (CSS) dans IE6?

Question

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

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

Sur certaines pages, je veux uniquement afficher une vignette. Je ne peux pas modifier le html, alors j'utilise 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 ratios hauteur/largeur préservés.

Cependant, dans IE6, l'image n'est mise à l'échelle que dans la dimension spécifiée dans le CSS. Elle conserve la hauteur 'naturelle'.

Voici un exemple de deux pages qui illustrent le problème:

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

Je serais très reconnaissant(e) pour toutes les suggestions, mais je voudrais souligner que (en raison des limitations de la plateforme choisie par le client), je recherche quelque chose qui ne nécessite pas de modifier le html. Le CSS serait également préférable au javascript.

MODIFICATION : Je devrais mentionner que les images sont de tailles et de ratios différents.

Answer 1

Adam Luter m'a donné l'idée pour cela, mais en réalité 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 cependant!

Answer 2

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

J'ai récemment trouvé une autre technique pour redimensionner les images, à nouveau conçue pour les arrière-plans. Cette technique présente quelques caractéristiques intéressantes :

1. Le ratio de l'image est préservé
2. La taille originale de l'image est conservée (c'est-à-dire, elle ne peut jamais rétrécir seulement grossir)

Le balisage repose sur un élément conteneur :

En utilisant le balisage ci-dessus, vous devez alors utiliser ces règles :

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

Si vous contrôlez ensuite la taille du conteneur, 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 100x100 et une image de 10x10. Le résultat est une image redimensionnée de 100x100.

1. En partant de l'état de base, si le conteneur est redimensionné à 20x100, l'image reste redimensionnée à 100x100.
2. En partant de l'état de base, si l'image est modifiée en 10x20, l'image se redimensionne à 100x200.

En d'autres termes, l'image est toujours au moins aussi grande que le conteneur, mais elle s'agrandira au-delà pour maintenir son ratio.

Cela n'est probablement pas utile pour votre site, et cela ne fonctionne pas dans IE6. Cependant, cela est utile pour obtenir un arrière-plan redimensionné pour votre fenêtre d'affichage ou conteneur.

Answer 3

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

Vous pourriez ajouter la ligne suivante dans votre fichier CSS:

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

Le code ci-dessus ne sera visible que par IE6. Le rapport hauteur-largeur ne sera pas parfait, mais vous pourriez le faire paraître quelque peu normal. Si vous vouliez vraiment le rendre parfait, vous auriez besoin d'écrire un peu de javascript qui lirait la largeur de l'image d'origine, et réglerait le rapport en conséquence pour spécifier une hauteur.

Answer 4

La seule façon de réaliser un redimensionnement explicite en CSS est d'utiliser des astuces telles que celles trouvées ici.

Pour IE6 uniquement, vous pouvez également utiliser des filtres (consultez PNGFix). Mais les appliquer automatiquement à la page nécessitera du javascript, même si ce javascript pourrait être intégré dans le fichier CSS.

Si vous avez besoin de javascript, vous pouvez simplement faire en sorte que le javascript complète la valeur manquante de la hauteur en inspectant l'image une fois que le contenu a été chargé. (Désolé, je n'ai pas de référence pour cette technique).

Enfin, et pardonnez-moi pour ce discours, vous pourriez choisir de ne pas prendre en charge IE6 dans ce cas. Vous pourriez ajouter _width: auto après votre règle width: 75px, de sorte qu'IE6 affiche au moins l'image de manière raisonnable, même si elle n'est pas de la bonne taille.

Je recommande la dernière solution simplement parce qu'IE6 est en train de disparaître : 20 % et en baisse presque d'un pour cent par mois. De plus, je note que votre site est récréatif et situé au Royaume-Uni. Ces deux éléments contribuent à une démographie moins encline à utiliser IE6 : l'utilisation d'IE6 diminue de près de 40 % pendant le week-end (désolé, pas de source), et le Royaume-Uni a une démographie IE6 beaucoup plus faible (encore une fois, désolé, pas de source).

Bonne chance !