What I need is to set the limit of an image's width to 100% in Internet Explorer, like other browsers do with max-width. That is, if the image's width is larger than the containing area's width, it scales down to fit the width of the containing area, but if it's smaller, its size doesn't change. Similarly, if the image is inside a table cell (td) and it's larger than the cell, I want it to scale to the size of the cell, instead of expanding it.
While there are other questions and answers that seem to be about this, I can't get any of them to work. For example, this solution is usually suggested to emulate max-width in Internet Explorer:
http://www.svendtofte.com/code/max_width_in_ie/
In essence using this:
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
However, when I try it I don't get expected results at all. In some cases I get width values of -1 and no displayed image at all when I check in Firebug or something like it.
And I don't see how that solution could work either.
EDIT:
According to request, here is some sample code:
<table cellpadding="4" cellspacing="0"
summary="" id="Push12Matt__simpletable_rph_vch_32" border="0" class="simpletable">
<tr class="strow">
<td valign="top" class="stentry" width="50%">
<div class="fig fignone" id="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><a
name="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><!-- --></a><p class="figcap"
>Bild 1. Uponor Push 12</p>
<a name="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06"><!-- --></a><img
class="image" id="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06"
src="/handbok/images/Push12/Push12_byggmatt.jpg" />
</div>
</td>
<td valign="top" class="stentry" width="50%">
<div class="fig fignone" id="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><a
name="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><!-- --></a><p class="figcap"
>Bild 2. Uponor ElPush 12</p>
<a name="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9"><!-- --></a><img
class="image" id="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9"
src="/handbok/images/Push12/Push12Electronic_byggmatt.jpg" />
</div>
</td>
</tr>
</table>
And the simple css (working for all browsers except IE):
img
{
max-width : 100%;
max-height : 100%;
}
But it doesn't work for this code in IE. Maybe it has something to do with the fact that it is placed in a table, I don't know, but when I try this div example on W3Schools, it works fine:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_max-width&preval=50%25
EDIT 2:
Example full HTML page:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv-se" xml:lang="sv-se">
<head>
<title>Image test</title>
<style type="text/css">
body {
max-height : 100%;
max-width : 100%;
width : 500px;
}
img {
max-height : 100%;
max-width : 100%;
width : auto;
height : auto;
}
td
{
max-height : 100%;
max-width : 500px;
display : block;
}</style>
</head>
<body id="frontpage">
<h1 class="title topictitle1">Image test</h1>
<div class="body conbody">
<table>
<tbody>
<tr>
<td>
<img src="Push12_byggmatt.jpg" />
</td>
<td>
<img src="Push12Electronic_byggmatt.jpg" />
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
This page shows the same problem. The images do not scale down to fit in the table cells. In other browsers I can resize the window as much as I want, and the images just keeps scaling down. IE8 and 9 don't. So it seems IE8 and 9 support max-width and max-height, but only for pixel values, not for percentage values - i.e. it only has partial support... If I'm correct, I'm really surprised it's so hard to find any info on this on the Internet. Everyone's just talking about these browsers as finally supporting it after IE6 didn't...
Anyway, I have written a jQuery workaround, but I would rather have not needed it. So if anyone can tell me I'm wrong and show me that IE8 and 9 actually do support max-width percentage values I'd be glad to be wrong :-)
See Question&Answers more detail:
os 
