Html CSS：图像最大宽度在 Firefox 和 IE 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16946633/
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
CSS: Image max-width not working in Firefox and IE
提问by Brian Graham
img {
max-width: 100% !important; /* Set a maxium relative to the parent */
width: auto !important; /* IE7-8 need help adjusting responsive images */
height: auto; /* Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
display: block;
-ms-interpolation-mode: bicubic;
}
The above CSS is taken from Twitter Bootstrapwhich allows for responsive images. The only problem is this has no effect in Firefox and IE.
上面的 CSS 取自Twitter Bootstrap，它允许响应式图像。唯一的问题是这在 Firefox 和 IE 中不起作用。
In the following case:
在以下情况下：
<div class="row-fluid">
<div id="logo" class="span4">
<a href="<?= home_url( '/' ) ?>"><img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" /></a>
</div>
</div>
http://dev.netcoding.net/lowsglass/about-us/- Here is a page showing the problem.
http://dev.netcoding.net/lowsglass/about-us/- 这是一个显示问题的页面。
In Firefox or IE, shrink the page to below 432px and you will see that the images do not follow max-width anymore (while above 764px they do).
在 Firefox 或 IE 中，将页面缩小到 432 像素以下，您将看到图像不再遵循最大宽度（而在 764 像素以上时则如此）。
How can I fix this – without using image containers – to make responsive images work in Firefox and IE?
我该如何解决这个问题——不使用图像容器——使响应式图像在 Firefox 和 IE 中工作？
回答by martinedwards
I've struggled a lot with Firefox / IE and max-width, specifically when on elements of display: inline-block. I use the CSS only solution below to add my fixes.
我在使用 Firefox / IE 和 max-width 时遇到了很多困难，特别是在显示元素上时：inline-block。我使用下面的 CSS only 解决方案来添加我的修复。
// Styles for Firefox
@-moz-document url-prefix() {
#logo img {
width: 100%;
}
}
// Styles for IE10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#logo img {
width: 100%;
}
}
回答by Cynthia
Instead of width:auto, try width:100%.
而不是width:auto，尝试width:100%。
Best,
最好的事物，
Cynthia
辛西娅
回答by ntk
Firefox fails to scale images with max-width/heightif width/heightis not defined. So there are two ways.
max-width/height如果width/height未定义，Firefox 无法缩放图像。所以有两种方法。
1. Set width and max-width:
1.设置宽度和最大宽度：
width: 100%;
max-width: 100%;
2. Use max-widthand max-heightin vwand vh:
2.使用max-width和max-height在vw与vh：
max-width: 90vw;
What means the image will have max 90% of visible width. Have fun!
这意味着图像将具有最大 90% 的可见宽度。玩得开心！
回答by atwixtor
Ran into the same problem and still haven't found a fix or CSS only hack, except for forcing width: 100% at small browser sizes, when the natural width of the image will usuallybe larger than the width of the page (here I've assumed I don't have any images narrower than 480px):
遇到了同样的问题，但仍然没有找到修复程序或 CSS only hack，除了在小浏览器尺寸下强制 width: 100%，此时图像的自然宽度通常会大于页面的宽度（这里我假设我没有任何小于 480 像素的图像）：
img
{
width: auto;
max-width: 100%;
height: auto;
}
@media screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation: portrait)
{
@-moz-document url-prefix() {
/* Firefox doesn't respect max-width in certain situations */
img
{
width: 100%;
}
}
But that will still force images that have naturally smaller widths to get blown up, which is bad. So at that point, if Javascript is feasible or already in use, I would add this to hit every image:
但这仍然会迫使自然宽度较小的图像被放大，这很糟糕。因此，在这一点上，如果 Javascript 可行或已在使用中，我会将其添加到每个图像中：
PSEUDO CODE:
伪代码：
$('img').css('max-width', this.actualFullSizeWidth + 'px');
...which should override the CSS max-width rules, and guarantee the image doesn't get larger than it's actual width.
...它应该覆盖 CSS 最大宽度规则，并保证图像不会变得比它的实际宽度大。
回答by Manuel
Responsive images for Firefox, IE, Chrome. Simple solution that works in Firefox
适用于 Firefox、IE、Chrome 的响应式图像。适用于 Firefox 的简单解决方案
<div class="article"><img></div>
.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}
回答by Schnapz
Bumped in similar problem after implementing large amount of site design using Bootstrap framework and only Chrome for debug... Biiig mistake © :) It appeared, that cool fluid Bootstrap styles didn't work for images in IE and Mozilla at all. All images were not resized and had original width, sometimes much wider than I've expected to see...
在使用 Bootstrap 框架实现大量网站设计后遇到了类似的问题，只有 Chrome 进行调试...... Biiig 错误 © :) 看起来，很酷的 Bootstrap 样式根本不适用于 IE 和 Mozilla 中的图像。所有图像都没有调整大小并具有原始宽度，有时比我预期的要宽得多......
I had a lot of similar places with two columns of divs - span6 for left column and span6 for right one (those are styles for fluid Bootstrap grid). Sometimes in those columns images were placed between text lines, and as you see, images didn't resize well in IE\Mozilla and all of the cool design became not good at all :(
我有很多类似的地方，有两列 div - 左列的 span6 和右列的 span6（这些是流体 Bootstrap 网格的样式）。有时在这些列中，图像被放置在文本行之间，如您所见，图像在 IE\Mozilla 中没有很好地调整大小，所有很酷的设计都变得一团糟:(
After googling and trying some advices from github I've decided to use jQuery :) I added class to column container (imageContainer for fluid span12 row), and added classes 50perc for images which I needed to resize properly (size of each image should be 50% of container's size). And here's the code:
在谷歌搜索并尝试来自 github 的一些建议之后，我决定使用 jQuery :) 我将类添加到列容器（用于流体 span12 行的 imageContainer），并为我需要正确调整大小的图像添加了 50perc 类（每个图像的大小应该是容器尺寸的 50%）。这是代码：
$(function(){
var cont = $('.imageContainer');
$('.50perc').each(function(i, el){
$(el).width(cont.width() / 2);
});
p.s. Actually it will be much effective to use this function in window.resize event handler :)
ps 实际上在 window.resize 事件处理程序中使用这个函数会非常有效:)
回答by Jason M. Batchelor
Actually, the problem isn't the img tag being affected, but the span* containers. When Bootstrap Responsive gets to a certain point, it turns off floating, and sets width to 100%. When that container pops back to 100%, the child within (your img tag) does exactly what you told it to do, which is expand to max-width of 100%.
实际上，问题不在于 img 标签受到影响，而在于 span* 容器。当 Bootstrap Responsive 到达某个点时，它会关闭浮动，并将宽度设置为 100%。当该容器弹回 100% 时，（您的 img 标签）中的子项完全按照您的要求执行，即扩展到最大宽度为 100%。
Look at this from responsive.css... above the declaration in the stylesheet, you'll see this:
从responsive.css...查看样式表中声明上方的内容，您将看到：
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
That is what is causing the img to "resize" ... its container no longer shrinks past a certain point, due to the way Bootstrap's responsive styles are set up.
这就是导致 img“调整大小”的原因……由于 Bootstrap 响应式样式的设置方式，它的容器不再缩小到某个点。
To block this, you could either modify the Bootstrap stylesheet (in which case you will have to redo the change anytime you want to update your Bootstrap files), or you can, in your own stylesheet, do something like the following:
要阻止这种情况，您可以修改 Bootstrap 样式表（在这种情况下，您必须在想要更新 Bootstrap 文件的任何时候重做更改），或者您可以在您自己的样式表中执行以下操作：
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: inline-block;
float: left;
}
That will put the floating back, however, you're still left with width as an issue, as the default Bootstrap style at that screen-width is trying to set width to 100%. You could try setting width:autoand then hopefully the widths for each specific span-step (.span1, .span2, etc.) will be allowed to take over, but you'll really have to test it out to see what is going to work best for your situation.
这将使浮动返回，但是，您仍然会遇到宽度作为问题，因为该屏幕宽度的默认 Bootstrap 样式试图将宽度设置为 100%。您可以尝试设置width:auto，然后希望每个特定跨度步长（.span1、.span2 等）的宽度将被允许接管，但您真的必须对其进行测试，看看什么是最好的对于你的情况。
