web-dev-qa-db-fra.com

Responsive Image vs spécifier la largeur et la hauteur d'une image en HTML

Je lis sur la conception réactive et j'ai remarqué le problème suivant:

L'une des recommandations concernant les "images fluides" consiste à utiliser une règle CSS telle que:

img {
max-width: 100%;
height: auto; }

mais pour qu'il ait le bon effet, nous devons supprimer les attributs de largeur et de hauteur de l'image en ligne de la balise img.

Comment ça se passe avec Il est important de spécifier la largeur et la hauteur d'une image en HTML ?

Merci

htmlcssimage
34
ProgNet

Bien que (comme je l'ai indiqué dans mon autre réponse) les attributs width et height n'interfèrent pas avec les images fluides, les images fluides interfèrent avec les images non encore chargées occupant la bonne quantité d'espace dans les navigateurs autres que Chrome. Il existe une solution de contournement: enveloppez l'image dans une div avec un rapport intrinsèque, comme décrit dans cet article: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper {
    max-width: 200px; /* The actual width of the image */
}

.img-wrapper2 {
    height: 0;
    padding-bottom: 100%; /* The image's height divided by its width */
}

Malheureusement, cela nécessite deux diviseurs de wrapper, afin d'obtenir l'effet de largeur max. Cependant, il offre les mêmes avantages à la vitesse de chargement apparente que les attributs width et height. Vous voudrez peut-être donner .img-wrapperoverflow: hidden pour masquer certains des comportements pathologiques des anciens IE.

jsFiddle: http://jsfiddle.net/7j3db/32/

17
Brilliand

Vous n'avez pas besoin de supprimer les attributs de largeur et de hauteur de l'image.

jsFiddle: http://jsfiddle.net/7j3db/

Testé dans Chrome, Firefox, Opera, IE9 et IE9 émulant IE7. Semble fonctionner correctement dans chacun d'eux, avec la règle CSS exacte que vous avez mentionnée.

EDIT: testé avec une image qui n'a pas pu être chargée: http://jsfiddle.net/7j3db/1/

Cela a eu l'effet approprié dans Chrome et IE (même IE7), mais pas dans Firefox ou Opera. Cependant, même dans Firefox et Opera, l'effet était mieux que si les attributs largeur et hauteur étaient omis (parce que l'attribut largeur avait toujours un effet, même si l'attribut hauteur n'en avait pas).

Tests supplémentaires avec texte alternatif ( http://jsfiddle.net/7j3db/2/ ): Géré parfaitement par IE7, mais IE9 rejoint Opera et IE8 fait quelque chose de vraiment étrange (la hauteur de l'image dépend de la longueur du texte alternatif - plus il y a de texte alternatif, moins il y a d'espace). Chrome semble ignorer complètement le texte de remplacement. Opera et FF affichent le texte de remplacement, mais sinon, ils ont essentiellement le même comportement qu'avant. La largeur et Cependant, les attributs de hauteur ne semblent être responsables d'aucun de ces problèmes de texte alternatif (sauf dans IE8, dans une certaine mesure).

11
Brilliand

Vous pouvez y parvenir en ajoutant

html, body{
max-width:100%;
width:100%;
}

et en mettant également ces propriétés sur le div parent de la balise img.

3
Balram Singh