为什么浏览器缩小时图像不会缩小（响应）？

我在这里有一个例子（在@ bjb568的帮助下）。请点击它以查看它在Chrome/IE/FF中的工作原理。为什么浏览器缩小时图像不会缩小（响应）？

这里是所有代码。

<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）中收缩。

有谁知道为什么和解决？

谢谢！

来源

2014-01-11 curious1

我认为差异可能是在浏览器确定你100％是什么意思的方式。 Chrome似乎认为它是对父元素的引用，FF似乎认为它意味着100％的图像大小。 –

@Thomas，非常感谢您的意见！ – curious1

奇怪的是，添加最小宽度似乎并没有像预期的那样修复它。似乎所有相对大小不会与FF混合。需要一个字面的地方。 –

对于img，在你的CSS改变max-width到width。

Here's a fiddle。

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

来源

2014-01-11 04:05:15 knrz

很多很多，谢谢！ – curious1

如果您使用img元素，您可能需要使用宽度：100％;最大宽度：100％;并显示：block;好的措施。省略显示：块可能会让你后来陷入麻烦。 – Smith

@史密斯我更新了你的建议小提琴 - 谢谢！ – knrz

你有没有在你的HTML文档的头部分这一行？

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

在没有看到整个html文档的情况下进行疑难解答有点困难。

来源

2014-01-11 03:57:52 Kenzo

是的，我有这条线，但它似乎没有效果。所有代码都非常简单，你可以在小提琴示例中看到它。 – curious1

你能发布一个链接到HTML页面吗？ – Kenzo

请查看帖子中的小提琴链接。 – curious1

为什么浏览器缩小时图像不会缩小（响应）？

回答

相关问题