Responsive images in a fluid-width table (max-width)

Question

Consider the following piece of code:

HTML:

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

CSS:

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

The image will never be wider than 200px, regardless of its native size. So far so good.

Here's the fiddle: http://jsfiddle.net/PeAAb/

---

However, if the parent element has its display set to table:

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

the image magically expands to its native width, expanding the table with it.

Here's the fiddle: http://jsfiddle.net/PeAAb/1/

---

Same happens with an actual table: http://jsfiddle.net/PeAAb/2/

---

Question: Is this expected behavior? If so, what can be done to work around this issue?

Setting the parent's width (even a percentage-based width) instead of max-width correctly squeezes the image back into its box, but is not a solution. I need the parent to be fluid (I'm using this for the main structure of the site, so that I can have the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width).

Also, setting table-layout to fixed seems to have no effect here.

Answer 1

The problem here is that a table (or a div set to behave like a table) is not a block element, and max-width only applies to block elements. My only suggestion to you is to wrap the table element in a div with display: block; set.

Here's the fiddle in case you're interested: http://jsfiddle.net/PeAAb/4/