web-dev-qa-db-fra.com

Comment préserver les proportions lors de la mise à l'échelle d'une image à l'aide d'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 uniquement afficher une vignette. Je ne peux pas modifier le code HTML, j'utilise donc les CSS suivants:

.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 respectées.

Dans IE6 cependant, l'image est uniquement redimensionnée dans la dimension spécifiée dans le CSS. Il conserve la hauteur "naturelle".

Voici un exemple d'une paire de pages qui illustrent le problème:

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

EDIT: Mentionnons que les images sont de tailles et de formats différents.

javascriptcssinternet-explorerimageinternet-explorer-6
92
Tom Wright

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

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

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

Merci pour les deux réponses cependant!

198
Tom Wright

Je suis heureux que cela fonctionne, alors 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 découvert une autre technique de redimensionnement des images, conçue à nouveau pour les arrière-plans. Cette technique a quelques fonctionnalités intéressantes:

  1. Le format de l'image est préservé
  2. La taille d'origine de l'image est conservée (c'est-à-dire qu'elle ne peut jamais rétrécir mais seulement grossir)

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 énumérés ci-dessus.

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

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

Ainsi, en d’autres termes, l’image est toujours au moins aussi grande que le conteneur, mais sera redimensionnée au-delà ( pour maintenir 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 ou conteneur de vue.

14
Adam Luter

Eh bien, je peux penser à un bidouillage 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 voulez vraiment la rendre parfaite, vous devrez écrire du code javascript qui lira la largeur de l'image d'origine et définir le rapport en conséquence pour spécifier une hauteur.

2
jgallant

La seule façon de faire une mise à l'échelle explicite en CSS consiste à utiliser des astuces telles que found here .

IE6 uniquement, vous pouvez également utiliser des filtres (consultez PNGFix ). Mais leur application automatique à la page nécessite JavaScript, bien que ce dernier puisse être intégré au fichier CSS.

Si vous allez avoir 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 tribune, vous voudrez peut-être éviter le support IE6 dans cette affaire. Vous pouvez ajouter _width: auto après votre width: 75px règle, de sorte que IE6 restitue au moins l'image de manière raisonnable, même si sa taille est incorrecte.

Je recommande la dernière solution simplement parce que IE6 est en voie de disparition: 20% et une baisse proche de pourcentage par mois . En outre, je note que votre site est récréatif et au Royaume-Uni. Ces deux solutions aident les démographiques à ne pas utiliser IE6: l’utilisation d’IE6 chute de près de 40% le week-end (aucune citation ne s’excuse), et le Royaume-Uni a une démographie beaucoup plus faible d’IE6 (encore aucune citation, désolée).

Bonne chance!

2
Adam Luter