Мне нужно установить ограничение ширины изображения в 100% в Internet Explorer, как это делают другие браузеры с max-width.То есть, если ширина изображения больше ширины содержащей области, она уменьшается, чтобы соответствовать ширине содержащей области, но если она меньше, его размер не изменяется.Аналогично, если изображение находится внутри ячейки таблицы (td) и оно больше ячейки, я хочу, чтобы оно масштабировалось до размера ячейки, а не расширялось.
Хотя есть и другие вопросыи ответы, которые, кажется, об этом, я не могу заставить их работать.Например, это решение обычно предлагается для эмуляции максимальной ширины в Internet Explorer:
http://www.svendtofte.com/code/max_width_in_ie/
По сути, используя это:
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
Однако, когда япопробуйте, я не получаю ожидаемых результатов вообще.В некоторых случаях я получаю значения ширины -1 и вообще не показываю изображение, когда проверяю в Firebug или что-то в этом роде.
И я тоже не вижу, как это решение могло бы работать.
РЕДАКТИРОВАТЬ:
В соответствии с запросом, вот пример кода:
<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>
И простой CSS (работает для всех браузеров, кроме IE):
img
{
max-width : 100%;
max-height : 100%;
}
Но это не работает для этого кода в IE.Может быть, это как-то связано с тем, что оно помещено в таблицу, я не знаю, но когда я пробую этот пример с div на W3Schools, он работает нормально: http://www.w3schools.com/cssref/playit.asp?filename=playcss_max-width&preval=50%25
РЕДАКТИРОВАТЬ 2:
Пример полной страницы HTML:
<!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>
Эта страница показывает ту же проблему.Изображения не уменьшаются, чтобы поместиться в ячейки таблицы.В других браузерах я могу изменять размер окна столько раз, сколько захочу, а изображения просто уменьшаются.IE8 и 9 нет.Так что, похоже, IE8 и 9 поддерживают max-width и max-height, но только для значений пикселей, а не для процентных значений - т.е. он имеет только частичную поддержку ... Если я прав, я действительно удивлен, что это так сложнонайти любую информацию по этому вопросу в Интернете.Все говорят только о том, что эти браузеры, наконец, поддержали его после того, как IE6 не ...
В любом случае, я написал обходной путь jQuery, но я бы предпочел, чтобы он мне не понадобился.Поэтому, если кто-нибудь скажет мне, что я не прав, и покажите, что IE8 и 9 действительно поддерживают процентные значения максимальной ширины, я был бы рад ошибиться: -)