Image réactive vs spécifier la largeur et la hauteur d'une image dans le HTML

Question

Je suis de la lecture sur le responsive design, et j'ai remarqué le problème suivant:

L'une des recommandations concernant la "fluidité des Images" est d'utiliser une règle CSS tels que :

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

mais pour avoir le droit d'affecter nous avons besoin de la bande image en ligne attributs width et height de la balise img.

Comment s'installer avec , Il est important de spécifier la largeur et la hauteur d'une image dans le HTML ?

Merci

Answer 1

Bien que (comme je l'ai dit dans mon autre réponse) l' width et height attributs de ne pas interférer avec la fluidité des images, le fluide images ne interférer avec les pas-encore-des images chargées de prendre la bonne quantité d'espace dans les navigateurs autres que le Chrome. Il y a une solution pour cela: envelopper l'image dans un 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 wrapper vrd, afin d'obtenir le max-width effet de droit. Toutefois, elle fournit les mêmes avantages apparents de la vitesse de chargement que l' width et height attributs fournissent. Vous voudrez peut-être donner .img-wrapper overflow: hidden de cacher certains de pathologiques du comportement des anciens IE.

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

Answer 2

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

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

Testé dans Chrome, Firefox, Opera, IE9 et IE9 émulation de IE7. Semble bien fonctionner dans tous les cas, avec le montant exact de la règle CSS que vous avez mentionné.

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

Cela a eu l'effet voulu sur Chrome et IE (même IE7), mais pas dans Firefox ou Opera. Cependant, même dans Firefox et Opéra, l'effet a été plus que si la largeur et la hauteur des attributs ont été laissés de côté (parce que l'attribut width toujours eu un effet, même si la hauteur de l'attribut n'ai pas).

D'autres tests avec le texte d'alt (http://jsfiddle.net/7j3db/2/): Gérée à la perfection par IE7, mais IE9 se joint à l'Opéra, et IE8 fait quelque chose de vraiment étrange (la hauteur de l'image dépend de la longueur du texte alt - plus le texte alt, le moins d'espace). Chrome semble ignorer le texte alt entièrement. Opera et FF afficher le texte alt, mais autrement, ont essentiellement le même comportement qu'ils ont fait avant. Les attributs width et height ne semblent pas être tenu responsable de ces texte alt malheurs, cependant (sauf dans IE8, dans une certaine mesure).

Answer 3

Vous pouvez atteindre cet objectif en ajoutant

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

et aussi de mettre ces propriétés sur le div parent de la balise img.