Les images responsives dans un fluide,-la largeur de la table (max-width)

Considérer le morceau de code suivant:

HTML:

<div>
    <img src="http://placehold.it/600x150" />
</div>

CSS:

div { max-width: 200px }
img { max-width: 100%  }​

L'image ne sera jamais plus large que 200px, indépendamment de sa taille d'origine. So far So good.

Voici le violon: http://jsfiddle.net/PeAAb/


Toutefois, si le parent de l'élément a son display ensemble de table:

div { max-width: 200px; display: table }

l'image comme par magie élargit à son natif de la largeur, de l'expansion de la table avec elle.

Voici le violon: http://jsfiddle.net/PeAAb/1/


Même chose arrive avec une table réelle: http://jsfiddle.net/PeAAb/2/


Question: Est-ce un comportement normal? Si oui, que peut-on faire pour contourner ce problème?

Réglage du parent width (même un pourcentage basé sur la largeur) au lieu de max-width correctement comprime l'image de retour dans sa boîte, mais n'est pas une solution. J'ai besoin de la mère à être liquide (j'utilise ce pour la structure principale du site, afin que je puisse avoir la barre latérale HTML apparaissent après le principal contenu dans la source, mais avec la barre latérale étant de largeur fixe).

Aussi, paramètre table-layout à fixe semble avoir aucun effet ici.

Je suis en train de construire quelque chose de sensible dans SharePoint 2010, qui a vraiment une mauvaise habitude de l'habillage des tables imbriquées autour des choses. Si vous connaissez une solution (qui fonctionne en arrière aussi loin que IE8) j'aimerais en entendre parler. @pKs de la solution (display:block;) échoue dans IE8/9 ici 🙁

OriginalL'auteur Joseph Silber | 2012-08-08