69

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?

Note

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>

[Update]

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.

[Update]

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();

});
Community
  • 1
  • 1
brad
  • 73,826
  • 21
  • 73
  • 85

9 Answers9

120

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.

Alex
  • 1,609
  • 2
  • 11
  • 5
  • I've tried table-layout: fixed on FF (19) and IE (9) and it works even without max-width. – civilu Mar 13 '13 at 12:08
  • For me table-layout: fixed rule fixed the image issue, but made the whole table narrower, even though I have width: 100% on the element with display: table – Evgeny Apr 30 '13 at 19:40
  • MDN reference for table-layout https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout. Thanks Alex! – Vestride May 13 '13 at 19:49
  • in my case i couldnt set a pixel width for the parent container, adding display: table and table-layout: fixed did the magic for me – JrBriones Nov 11 '13 at 17:36
  • Thank you! I was having a possibly related problem in the stock Android browser (trying to use percentage max-width on an image inside an element with display:table-cell) and the `table-layout: fixed` solved it for me. – Yumecosmos Jan 27 '14 at 22:46
31

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.

mVChr
  • 49,587
  • 11
  • 107
  • 104
  • Good find! It seems that the spec does not apply to inline elements. It doesn't seem to fix the issue though unfortunately. – brad May 27 '10 at 19:00
  • Does the display have to be table-cell? Removing that will get you more consistent results. – edl May 27 '10 at 19:14
  • Well, I didn't write the code that uses `table-cell` and to be quite honest I don't understand it well. So yes, it has to be table-cell. – brad May 27 '10 at 19:52
  • Would you be able to rewrite the page so that all divs with `display:table-cell;` are actually table cells. I don't see the benefit of using divs if you are going to display them as `table-cell` – Brook Julias Jun 09 '10 at 13:38
  • 2
    Here is the exact section of the spec: http://www.w3.org/TR/CSS2/visudet.html#min-max-widths – KajMagnus May 21 '12 at 18:22
  • A little more detail & Mozilla-specific info: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width – cellepo Aug 19 '13 at 19:10
  • A table row is not a table, so the behaviour is buggy. By the way, Opera Blink suffers from the same bug. – Hibou57 Feb 09 '16 at 05:25
0

I got it working by using width: 100% instead of max-width: 100%.

liina
  • 33
  • 2
  • 10
    This is a very bad answer. The diffrence between `width` and `max-width` is very important when working with images. `width` forces the image to be that width, no matter if that will make much bigger than its resolution (what will look nasty in most cases). But `max-width` defines that the image can not be bigger than the specified with, what means if a picture is bigger than the container it will be scaled to 100% – idmean May 25 '14 at 09:00
  • @idmean, while I agree with your point, I don't think it's necessarily a "very bad answer" as there may be use cases where it's better to force a `width` then have the image overflow the cell. Or, one could use `width` in conjunction with `max-width`, again depending on the situation. – bassplayer7 Jan 01 '16 at 17:17
0

Setting width: 100% does fix the problem, but it introduces another one. In WordPress you don't want to set width: 100% to an image. What if the image is medium-size with a width of 300px, what then? I've been using classes to set the width to 50% on medium-size, but what if the image is smaller? Then it will get stretched. In webkit browsers it works with width: auto; max-width: 100%; but since Firefox, Opera and IE ignore that... that's a huge problem.

Daniel Dogeanu
  • 397
  • 4
  • 12
0

This has become a very confusing topic...

Max-width doesn't work on inline elements neither in table-cell elements. It DOES work on an image if its display is set to block, but what is 100%? In a table layout, the content of a cell pushes the column width to accommodate all content as possible. So max-width:100%, inside a table cell ends up being the natural width of the content in most cases.

That is why setting the max-width property of your image in pixels works:

<style>
    div { display: table-cell; padding: 15px; width: 200px; }
    div img { max-width: 200px; display:block;}
</style>

table-layout: fixed, as suggested by Alex, may work if the image is not in the first row of the table, because the first row's content dictates columns widths.

Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
0

For a specific case, there's another workaround that I accidently found online: if you use display: table; + display: table-cell; to mimic a two (or more) column layout in a responsive site, try this instead: give the sidebar a widht of, say, 350px and the main content part of the site a width like width: calc(100% - 360px); . That did the trick for me, and the bonus was I needed a fixed width sidebar. I giess that will work with em's too.

Of course, this is js-dependent, but nowadays should be more than OK.

kufeiko
  • 101
  • 4
-1

add float: left to the div css

Lloyd Powell
  • 18,270
  • 17
  • 87
  • 123
Zachary Forrest
  • 1
-1

Have you tried adding a position property to your image? img {position:relative;}? It should conform to the parent element.

Brook Julias
  • 2,085
  • 9
  • 29
  • 44
-3

I had the same problem. I solved it by doing this:

Tested in Opera and Fi

.classname {
    max-width: 100%;
    width: 100%;
    display: table-cell !important;}
Zeriz
  • 1
  • 1