De volgende code wordt correct weergegeven in Chrome of IE (de afbeelding is 200 px breed). In Firefox en Opera wordt de stijl max-widthvolledig genegeerd. Waarom gebeurt dit en is er een goede work around? En op welke manier voldoen de meeste normen?
Opmerking
Een mogelijke oplossing voor deze specifieke situatie is om max-widthin te stellen op 200px. Dit is echter een nogal gekunsteld voorbeeld. Ik ben op zoek naar een strategie voor een container met variabele breedte.
<!doctype html>
<html>
<head>
<style>
div { display: table-cell; padding: 15px; width: 200px; }
div img { max-width: 100%; }
</style>
</head>
<body>
<div>
<img src="https://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis
ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue.
at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
leo metus, aliquam eget convallis eget, molestie at massa.
</p>
</div>
</body>
</html>
[Bijwerken]
Zoals vermeld door mVChrhieronder, is de w3.org specstelt dat max-widthniet van toepassing is op inline-elementen. Ik heb geprobeerd div img { max-width: 100%; display: block; }, maar het lijkt het probleem niet op te lossen.
[Bijwerken]
Ik heb nog steeds geen oplossing voor dit probleem. Ik gebruik echter de volgende javascript-hack om mijn problemen op te lossen. In wezen bootst het de bovenstaande situatie na en controleert of de browser max-widthondersteunt binnen display: table-cell. (Het gebruik van een data-uri voorkomt een extra http-verzoek. Het onderstaande is een 3×3 bmp.)
jQuery( function ( $ ) {
var img = $( "<img style='max-width:100%' src='" +
"data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA" +
"AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//" +
"/wAAAAAAwAAAAKAAAAA%3D" +
"'>" )
.appendTo(
$( "<div style='display:table-cell;width:1px;'></div>" )
.appendTo( "body" )
);
$.support.tableCellMaxWidth = img.width() == 1;
img.parent().remove();
});
Antwoord 1, autoriteit 100%
Wat u moet doen, is uw wrapper-div (die met display: table-cell) in een andere div plaatsen met display: tableen table-layout: fixed. Dat zorgt ervoor dat zowel Firefox als Opera de regel max-widthrespecteren.
Bekijk dit voorbeeld op jsFiddle.
Antwoord 2, autoriteit 26%
De w3.org specstelt dat max-width niet van toepassing is op inline-elementen, dus u krijgt inconsistent gedrag in verschillende browsers. Ik ben niet zeker van het beoogde resultaat, maar u kunt het bereiken als u div img { display:block }instelt en vervolgens de imgen ptags met floats in plaats van standaard inline.
Antwoord 3
Ik heb het werkend gekregen door width: 100%te gebruiken in plaats van max-width: 100%.
Antwoord 4
Breedte instellen: 100% lost het probleem op, maar introduceert een ander probleem. In WordPress wil je de breedte: 100% niet instellen op een afbeelding. Wat als de afbeelding middelgroot is met een breedte van 300px, wat dan? Ik heb klassen gebruikt om de breedte op middelgroot in te stellen op 50%, maar wat als de afbeelding kleiner is? Dan wordt het uitgerekt. In webkit-browsers werkt het met width: auto; maximale breedte: 100%; maar aangezien Firefox, Opera en IE dat negeren… is dat een enorm probleem.