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中,将页面缩小到432px以下,您将看到图像不再遵循max-width(而它们的大小超过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

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

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

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

2.使用max-width和max-height在vw与vh：

max-width: 90vw;

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

Answer 3

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