CSS 在 Internet Explorer 中设置最大宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8645087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set max-width in Internet Explorer
提问by Anders
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.
我需要的是在 Internet Explorer 中将图像宽度的限制设置为 100%，就像其他浏览器对max-width. 也就是说，如果图像的宽度大于包含区域的宽度，它会缩小以适应包含区域的宽度，但如果它更小，则其大小不会改变。同样，如果图像在表格单元格 ( td) 内并且比单元格大，我希望它缩放到单元格的大小，而不是扩展它。
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:
虽然还有其他问题和答案似乎与此有关，但我无法让其中任何一个起作用。例如，通常建议使用此解决方案在 Internet Explorer 中模拟 max-width：
http://www.svendtofte.com/code/max_width_in_ie/
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.
但是，当我尝试它时，我根本没有得到预期的结果。在某些情况下，当我签入 Firebug 或类似的东西时，我得到的宽度值为 -1 并且根本没有显示图像。
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):
和简单的 css（适用于除 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
但它不适用于 IE 中的这段代码。也许它与放在桌子上的事实有关，我不知道，但是当我在 W3Schools 上尝试这个 div 示例时，它工作正常：http: //www.w3schools.com/cssref/playit .asp?filename=playcss_max-width&preval=50%25
EDIT 2:
编辑2：
Example full HTML page:
示例完整的 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>
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...
此页面显示相同的问题。图像不会缩小以适应表格单元格。在其他浏览器中，我可以根据需要调整窗口大小，而图像只会不断缩小。IE8 和 9 没有。所以似乎 IE8 和 9 支持最大宽度和最大高度，但仅适用于像素值，而不适用于百分比值 - 即它只有部分支持......如果我是对的，我真的很惊讶它很难在 Internet 上查找有关此的任何信息。每个人都在谈论这些浏览器在IE6没有之后终于支持它......
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 :-)
无论如何，我已经编写了一个 jQuery 解决方法，但我宁愿不需要它。因此，如果有人能告诉我我错了，并告诉我 IE8 和 9 实际上确实支持最大宽度百分比值，我会很高兴是错的 :-)
回答by Peter O.
IE9, at least, does support max-widthpercentages for images, but the percentage is relative to the image'ssize, not the container'ssize. (You can see this by changing 100%to, say, 70%.) It will work somewhat as expected, however, if you specify inheritinstead of 100%. Doing so will inherit the container's size for max-widthin 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 inheritthis way will make the table cell's width equal to the image's unscaled width, even though the image is correctly scaled down.
至少 IE9 确实支持max-width图像的百分比，但百分比是相对于图像的大小，而不是容器的大小。（您可以通过更改看到这个100%，比方说，70%）这将在一定程度按预期工作，但是，如果你指定inherit的代替100%。这样做将继承max-widthIE9 中的容器大小。（我只在 IE9、Firefox 和 Google Chrome 中测试了您的示例页面，对于该页面，图像不会随着窗口宽度变小而不断缩小。）但这并不是一个完美的解决方案；在 IE8 浏览器模式下，应用inherit这种方式将使表格单元格的宽度等于图像未缩放的宽度，即使图像被正确缩小。
回答by Shauna
Is there any particular reason why you've put a div inside of a td?
您在 td 中放置一个 div 有什么特别的原因吗？
There are two things offhand that I think may be interfering:
我认为有两件事可能会干扰：
- The div. If it's only there for class and ID, see if you can move that into the td element. If you can't, make sure you set its width and height properties to 100%. Letting it take on automatic dimensions may be interfering with the image sizing.
- It may be breaking due to the nature of
display: table-cell;, which is whattdtypically 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).
- div。如果它仅用于 class 和 ID，请查看是否可以将其移动到 td 元素中。如果不能，请确保将其宽度和高度属性设置为 100%。让它采用自动尺寸可能会干扰图像大小调整。
- 由于 的性质，它可能会中断
display: table-cell;，这td通常是默认的。尝试将其显示更改为 block 或 inline-block 之类的内容，看看是否能解决问题，然后从那里开始（仅供参考 - IE7 不理解 inline-block，但您可以在找出导致图像的原因后处理该问题问题）。
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 cellpaddingand valignsuggest 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.
此外，您对诸如cellpadding和等属性的使用valign表明您的引用已经过时了。我强烈建议您了解更多当前的方法和标准。这是一篇关于 cellpadding 的文章，可以帮助您入门。
回答by Tushar Walzade
Setting
max-width: noneresolved an issue in my case.
设置
max-width: none解决了我的问题。
Note:tested on IE11
注意：在 IE11 上测试
