css - 为什么当浏览器缩小时图像不缩小(响应)？

Question

我这里有一个例子(在 @bjb568 的帮助下)。请点击它查看它在 Chrome/IE/FF 中的工作方式。

http://jsfiddle.net/P92Fs/11/

这是所有代码。

<div style="text-align:center">
<div class="media">
    <img src="http://www.trumba.com/i/DgCAOmnZFp7ia4FDZJne5SHC.gif" />
    <div class="caption">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
    </div>
</div>
</div>

.media {
    position: relative;
    display: inline-block;
}
.media .caption {
    position: absolute;
    bottom: 0;
    text-align: left;
}
img {
    max-width: 100%;
}

在 Chrome (Windows) 中，当浏览器的视口(viewport)窄于图像宽度时，图像会相应缩小。这就是我想要的。

但是在IE(v10，Windows)和Firefox(v26，Windows)中并没有相应缩小。

有人知道原因和解决方法吗？

谢谢!

Answer 1

对于 img，将 CSS 中的 max-width 更改为 width。

Here's a fiddle .

max-width只是设置了最大宽度，并不是实际宽度。