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.
OriginalL'auteur Joseph Silber | 2012-08-08
Vous devez vous connecter pour publier un commentaire.
Le problème ici est que d'une table (ou un div mis à se comporter comme une table) n'est pas un élément de bloc, et max-width ne s'applique qu'à des éléments de bloc. Ma seule suggestion pour vous est d'envelopper l'élément de tableau dans un div avec display: block; ensemble.
Voici le violon dans le cas où vous êtes intéressé: http://jsfiddle.net/PeAAb/4/
Je suis à contrecœur de l'acceptation de cette réponse, car elle est correcte. Cependant, il ne résout pas le problème.
Joseph, merci pour l'acceptation. Je voudrais avoir une solution à votre problème, je ne suis pas habituellement comme pour le post "qui ne peut pas être fait" réponses – mais après quelques recherches combinées avec ma propre expérience personnelle, je n'ai pas été en mesure de trouver une bonne solution à votre problème. En fait, cela a perplexe moi un peu; j'ai hâte de l'audition de toute personne qui peut résoudre ce mieux que moi.
OriginalL'auteur David Vasquez
Je sais que c'est assez tard, mais il a trouvé la réponse, qui s'est avéré être assez simple et super facile, table-layout: fixe.
Trouve ici: http://blog.room34.com/archives/5042
De toute façon, c'est pour ceux qui recherchent une réponse à cette énigme, comme je l'ai été.
table-layout: fixed
est une réponse ici, surtout depuis que l'OP a dit que cela ne fonctionnait pas pour lui.Cela ne fonctionne qu'avec une largeur spécifiée. La question est de savoir comment y parvenir avec un
max-width
ensemble. Le parent doit être fluide largeur.OriginalL'auteur manonatelier