为什么当浏览器缩小时图像不会缩小(响应)?

时间:2014-01-11 03:53:48

标签: css cross-browser

我有一个例子(在@ 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)中,当浏览器的视口比图像宽度窄时,图像会相应缩小。这就是我想要的。

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

有谁知道为什么和修复?

谢谢!

2 个答案:

答案 0 :(得分:4)

对于img,请在CSS中将max-width更改为width

Here's a fiddle

最大宽度只设置最大宽度,而不是实际宽度。

答案 1 :(得分:0)

你的html文档的head部分是否有这一行?

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

如果没有看到整个HTML文档,就很难排除故障。