Geek Answers Handbook

Responsive images in the liquid width table (maximum width)

Consider the following code snippet:

HTML:

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

CSS

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

An image will never be larger than 200px, regardless of its own size. So far so good.

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

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

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

the image is magically expanded to its own width, expanding it using table .

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

The same thing happens with the actual table: http://jsfiddle.net/PeAAb/2/

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

Setting the parent width (even the percentage width) instead of max-width correctly compresses the image back into its field, but is not a solution. I need a parent to be fluid (I use this for the main structure of the site, so I can have the HTML sidebar appear after the main content in the source, but with a fixed width sidebar ).

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

+7
source share
2 answers

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

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

+7
source

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

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

In any case, this is for those who are looking for an answer to this riddle, just like me.

-one
source

More articles:


All Articles