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

上面的CSS是从允许响应图像的CSS中提取的。唯一的问题是，这在Firefox和IE中没有效果

在下列情况下：

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

-这是显示问题的页面

在Firefox或IE中，将页面缩小到432px以下，您将看到图像不再遵循最大宽度（而在764px以上）

---

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

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

从responsive.css看这个。。。在样式表中的声明上方，您将看到：

<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>

这就是导致img“调整大小”的原因。。。由于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: block;
    float: none;
    margin-left: 0;
    width: 100%;
}

---

这将使浮动变回原来的水平，但是，您仍然会遇到宽度问题，因为屏幕宽度的默认引导样式正试图将宽度设置为100%。您可以尝试设置

width:auto

，然后希望每个特定跨距步（.span1、.span2等）的宽度可以接管，但您确实需要对其进行测试，看看什么最适合您的情况。

尝试

width:auto

，而不是

width:auto

最好的

---

Cynthia

在使用Bootstrap框架和Chrome进行大量站点设计后，遇到了类似的问题。。。Biiig错误：）看起来，在IE和Mozilla中，很酷的流体引导风格根本不适用于图像。所有的图片都没有调整大小，都有原始宽度，有时比我预期的要宽得多

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

在谷歌搜索并尝试了github的一些建议后，我决定使用jQuery:）我向列容器（imageContainer for fluid span12 row）添加了类，并为需要适当调整大小的图像添加了类50perc（每个图像的大小应为容器大小的50%）。下面是代码：

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

---

p、 事实上，在window.resize事件处理程序：）中使用这个函数会非常有效。

我在Firefox/IE和max width方面做了很多努力，特别是在显示元素：inline block上。我使用下面的CSS唯一解决方案来添加我的修复

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

---

遇到了同样的问题，但仍然没有找到修复方法或仅使用CSS的破解方法，除了强制宽度：在浏览器尺寸较小时为100%，此时图像的自然宽度通常会大于页面宽度（这里我假设没有任何图像小于480px）：

但这仍然会迫使宽度自然较小的图像放大，这是不好的。因此，在这一点上，如果Javascript是可行的，或者已经在使用中，我会将其添加到每个图像中：

伪代码：

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

---

…这将覆盖CSS最大宽度规则，并保证图像不会超过其实际宽度。

Firefox、IE、Chrome的响应图像。在Firefox中工作的简单解决方案

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

.article{背景：透明0%0%/100%auto；}
.文章img{最大宽度：100%；}

如果未定义

宽度/高度

，Firefox无法使用

最大宽度/高度

缩放图像。所以有两种方法

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

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

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

2。在

vw

和

vh

中使用

max width

和

max height

：

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

---

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

听起来Bootstrap的响应位可能会给您带来一些问题。你确定没有媒体的质疑在干扰吗？我肯定不是媒体的质疑。

img

标记没有应用任何样式，除了

responsive.css

和

@media print

之外。嘿，你找到答案了吗？我很抱歉。。。这是忙碌的一周！不幸的是，我不能真正给你任何具体的，因为它将真正取决于你的目标屏幕大小和你真正希望它看起来像在这些大小。老实说，你必须对它进行修补，以获得一个适合你并且仍然可用的外观。这在Firefox上不起作用，除非父母定义了固定的宽度。在我的脑海中，我正在和Bette Midler一起为你唱小夜曲。什么是大众？它是Firefox特有的，可以用作100%vw？vw-可见或视口宽度，vh-视口高度。长度单位表示视口宽度（vw）、高度（vh）的视口大小的1%。您可以在所有现代浏览器中使用它。因此，如果我使用max-width:100%后跟max-width:100vw，这能解决Firefox中的问题，但在其他地方保持其原始效果吗？Firefox需要设置宽度，否则它会忽略最大宽度。所以你可以使用宽度：100vw。

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

max-width: 90vw;