6 
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 中工作？

4

7 回答 7

13

我在 Firefox / IE 和 max-width 上遇到了很多困难，特别是在 display: 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%;
    }
}
于 2013-11-06T12:35:03.337 回答
5

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

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

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

2.在 and 中使用max-widthand ：max-heightvwvh

max-width: 90vw;

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

于 2015-11-02T09:41:05.653 回答
3

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

最好的，

辛西娅

于 2013-06-15T18:48:51.597 回答
0

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

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

伪代码：

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

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

于 2014-02-14T23:22:34.077 回答
0

实际上，问题不在于 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 等）的宽度将被允许接管，但您确实必须对其进行测试以查看最有效的方法对于你的情况。

于 2013-06-05T20:10:50.333 回答
0

在使用 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);
});

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

于 2013-07-20T15:06:47.920 回答
0

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

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

.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}
于 2015-06-11T08:27:16.713 回答