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中，将页面缩小到432px以下，您将看到图像不再跟随最大宽度（当它们超过764px时）。

如何在不使用图像容器的情况下解决此问题 - 使响应式图像在Firefox和IE中运行？

Answer 1

我在Firefox / IE和max-width方面遇到了很多困难，特别是在显示元素时：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 2

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

最佳，

辛西娅

Answer 3

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

<强> 1。设置宽度和最大宽度：

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

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

max-width: 90vw;

图像的最大可见宽度是90％。玩得开心！

Answer 4

实际上，问题不是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 5

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

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

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

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

P.S。实际上，在window.resize事件处理程序中使用此函数会非常有效：）

Answer 6

遇到同样的问题仍然没有找到修复或CSS只有黑客，除了强制宽度：小浏览器尺寸100％，当图像的自然宽度通常是大于页面的宽度（这里我假设我没有比480px更窄的图像）：

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可行或已经在使用，我会添加它来点击每个图像：

PSEUDO CODE：

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

...应该覆盖CSS max-width规则，并保证图像不会超过它的实际宽度。

Answer 7

针对Firefox，IE，Chrome的响应式图片。适用于Firefox的简单解决方案

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

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

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

7 个答案: