Question

To understand what I mean, please see this snippet:

<table style="width: 100%">
    <tbody><tr><td>
        <div style="width: 100%">
            <img src="myimage.png" />
        </div>
    </td></tr></tbody>
</table>

If myimage.png is smaller than the browser window, the div is renderd to fit the window size. So far so good. But if the img is larger, everything exceeds the viewable area.

Is there a way to let set the img width to something like “100% of the image, but not larger than 100% of the viewable area”?

UPDATE:
max-width: 100% for the image seems not to do the job inside tables:
http://jsfiddle.net/h58Ra/

Answer 1

max-width is exactly what you should use: http://jsfiddle.net/h58Ra/ (on the img). The div should never exceed the size with or without width: 100%.

If you remove the max-width: 100% in the fiddle you’ll notice how the div still doesn’t get larger, even though the img does.

Apparently the div was inside a table which for some reason made it fail. We reached a solution together: (from the comments) “If I set style=”table-layout: fixed; width: 100%”for the table, everything works fine”.