Menu
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 :-)
736
It's best to make your website at least 1920px wide. A 1280px website will look great on laptops and mobile devices but not so great on large monitors. To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more.
Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.
Definition and UsageThe max-width property defines the maximum width of an element. If the content is larger than the maximum width, it will automatically change the height of the element. If the content is smaller than the maximum width, the max-width property has no effect.
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width .
IE9, at least, does support max-width percentages for images, but the percentage is relative to the image's size, not the container's size. (You can see this by changing 100% to, say, 70%.) It will work somewhat as expected, however, if you specify inherit instead of 100%. Doing so will inherit the container's size for max-width in IE9. (I've only tested your example page in IE9, Firefox, and Google Chrome, and it's not true that for that page, the images will keep scaling down as the window width gets smaller.) This is not a perfect solution however; in IE8 browser mode, applying inherit this way will make the table cell's width equal to the image's unscaled width, even though the image is correctly scaled down.
151
Is there any particular reason why you've put a div inside of a td?
There are two things offhand that I think may be interfering:
display: table-cell;, which is what td typically defaults to. Try changing its display to something like block or inline-block and see if that fixes the issue, then go from there (fyi - IE7 doesn't understand inline-block, but you can deal with that after you figure out what's causing the image problem).Another alternative is to avoid tables altogether. The code you've provided suggests that you may be using a table for layout purposes, which isn't what they're meant for.
Additionally, your usage of attributes such as cellpadding and valign suggest that your references are quite a bit outdated. I highly recommend learning about more current methods and standards. Here's an article addressing cellpadding to get you started.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
