CSS：图像最大宽度在 Firefox 和 IE 中不起作用

Question

img {
    max-width: 100% !important; /* Set a maxium relative to the parent */
    width: auto\9 !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;
}

上面的 CSS 取自 Twitter Bootstrap，它允许响应式图像。唯一的问题是这在 Firefox 和 IE 中无效。

以下情况：

<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/ - 这是一个显示问题的页面。

在 Firefox 或 IE 中，将页面缩小到 432 像素以下，您会看到图像不再遵循最大宽度（而在 764 像素以上时它们会这样做）。

如何在不使用图像容器的情况下解决此问题，以使响应式图像在 Firefox 和 IE 中工作？

Answer 1

实际上，问题不在于 img 标签受到影响，而在于 span* 容器。当 Bootstrap Responsive 到达某个点时，它会关闭浮动，并将宽度设置为 100%。当该容器弹回 100% 时，其中的子项（您的 img 标签）会完全按照您的要求执行，即扩展为 100% 的最大宽度。

从 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%;
}

这就是导致 img “调整大小”的原因......由于 Bootstrap 的响应式样式的设置方式，它的容器不再缩小到某个点。

要阻止这种情况，您可以修改 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;
}

这将使浮动返回，但是，您仍然会遇到宽度问题，因为该屏幕宽度的默认 Bootstrap 样式正在尝试将宽度设置为 100%。您可以尝试设置width:auto，然后希望每个特定跨步（.span1、.span2 等）的宽度将被允许接管，但您真的必须对其进行测试以了解发生了什么最适合您的情况。

Answer 2

试试width:100%，而不是width:auto。

最好的，

辛西娅

Answer 3

在使用 Bootstrap 框架和只有 Chrome 进行调试实现大量网站设计后遇到了类似的问题... Biiig 错误 © :) 看起来，酷流畅的 Bootstrap 样式根本不适用于 IE 和 Mozilla 中的图像.所有图片均未调整大小且具有原始宽度，有时比我预期的要宽得多...

我有很多类似的地方有两列 div - span6 用于左列，span6 用于右列（这些是流体引导网格的样式）。有时在这些列中，图像被放置在文本行之间，如您所见，图像在 IE\Mozilla 中无法很好地调整大小，并且所有很酷的设计都变得不好:(

在谷歌搜索并尝试了来自 github 的一些建议之后，我决定使用 jQuery :) 我将类添加到列容器（用于流体 span12 行的 imageContainer），并为需要正确调整大小的图像添加了类 50perc（每个图像的大小图像应该是容器大小的 50%）。这是代码：

$(function(){
    var cont = $('.imageContainer');
    $('.50perc').each(function(i, el){
    $(el).width(cont.width() / 2);
});

附言实际上在 window.resize 事件处理程序中使用这个函数会非常有效:)

Answer 4

我在 Firefox / IE 和 max-width 方面遇到了很多困难，特别是在 display: inline-block 元素上。我使用下面的纯 CSS 解决方案来添加我的修复。

// 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%;
    }
}

Answer 5

遇到了同样的问题，但仍然没有找到修复或仅使用 CSS 的 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%;
        }
    }

但这仍然会迫使自然宽度较小的图像被炸毁，这很糟糕。所以到那时，如果 Javascript 可行或已经在使用，我会添加这个来点击每张图片：

伪代码：

$('img').css('max-width', this.actualFullSizeWidth + 'px');

...应该覆盖 CSS 最大宽度规则，并保证图像不会大于它的实际宽度。

Answer 6

适用于 Firefox、IE、Chrome 的响应式图像。适用于 Firefox 的简单解决方案

<div class="article"><img></div>

.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}

Answer 7

如果未定义 width/height，Firefox 无法使用 max-width/height 缩放图像。所以有两种方法。

1.设置宽度和最大宽度：

width: 100%;
max-width: 100%;

2。在vw 和vh 中使用max-width 和max-height：

max-width: 90vw;

这意味着图像将具有最大 90% 的可见宽度。玩得开心！