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.

Dotson

I'm trying to build something responsive in SharePoint 2010, which has a really nasty habit of wrapping nested tables around things. If you know of a solution to this (that works back as far as IE8) I'd love to hear about it. @pKs's solution (display:block;) fails in IE8/9 here :( – Crossbones

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/

Enervated

Thanks for your correct answer, but in my case this doesn't help me. Take a look at my demo. It works correctly in webkit, but nowhere else. Wrapping another element inside of it does not help. – Dotson

I'm begrudgingly accepting this answer, since it's correct. However, it doesn't solve the problem. – Dotson

Joseph, thank you for the acceptance. I wish I had a solution to your problem, as I don't typically like to post "that can't be done" responses – but after some research combined with my own personal experiences, I haven't been able to come up with a good solution to your problem. In fact, this has perplexed me quite a bit; I look forward to hearing from anyone who can solve this better than I have. – Enervated

Answer 2

I know this is pretty late, but found the answer, which turned out to be pretty simple and super easy, table-layout: fixed.

Found here: http://blog.room34.com/archives/5042

Anyway, this is for those looking for an answer to this conundrum as I was.

Campanulaceous

I would briefly explain or paraphrase the article as to why table-layout: fixed is an answer here especially since the OP said that didn't work for him. – Blowtorch

This only works with a specified width. The question was how to achieve this with a max-width set. The parent has to be fluid width. – Dotson