Menu
The following code displays correctly in Chrome or IE (the image is 200px wide). In Firefox and Opera the max-width style is ignored completely. Why does this happen and is there a good work around? Also, which way is most standards compliant?
One possible work around for this particular situation is to set max-width to 200px. However, this is a rather contrived example. I'm looking for a strategy for a variable width container.
<!doctype html> <html> <head> <style> div { display: table-cell; padding: 15px; width: 200px; } div img { max-width: 100%; } </style> </head> <body> <div> <img src="http://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> As stated by mVChr below, the w3.org spec states that max-width does not apply to inline elements. I've tried using div img { max-width: 100%; display: block; }, but it does not seem to correct the issue.
I still have no solution for this issue. However, I am using the following javascript hack to fix my problems. Essentially, it recreates the situation above and checks if the browser supports max-width within display: table-cell. (Using a data uri prevents an extra http request. The one below is a 3x3 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(); }); 
692
If you want to make your max-width to work, you need to set the CSS property table-layout: fixed; on the table and use width , not max-width . Show activity on this post. Add the following rule your css section. Show activity on this post.
Change the maximum width. max-width overrides width , but min-width overrides max-width .
What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule.
See this example on jsFiddle.
160
The w3.org spec states that max-width does not apply to inline elements, so you will get inconsistent behavior across browsers. I'm not sure of your intended outcome, but you may achieve it if you set div img { display:block } and then align the img and p tags with floats instead of standard inline.
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
