响应式图像在 Chrome 中工作，但在 Firefox 中不工作答案

【问题标题】：Responsive images working in Chrome but not Firefox响应式图像在 Chrome 中工作，但在 Firefox 中不工作
【发布时间】：2016-06-28 13:28:21
【问题描述】：

我正在开发一个使用响应式图像和几个固定侧边栏的网站（第一次尝试响应式设计）。问题：响应式图像在 Chrome 中按预期工作，但在 Firefox 中根本不工作。以下是相关页面的示例：

http://ellenflaherty.com/projects/carland/

知道为什么会出现这种差异吗？

注意：当浏览器超过 1000 像素时，响应式图像不起作用。当针对平板电脑/手机大小的屏幕进行调整时，它们实际上正在按预期工作。

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

我已经看过了，就 Firefox 而言，我建议你删除你的 display: inline-block 和 float: left;当您的浏览器窗口到达时重新调整为更大的屏幕尺寸，例如您在问题中提到的 1000px，然后对于较小的屏幕尺寸，您可以重新引入显示和浮动以确保页面按应有的方式显示。

我在代码下方附上一张图片，说明在大屏幕上移除显示和浮动后的样子。

.projectimg {
    bottom: 0;
    /* display: inline-block;  REMOVE THIS */
    /* float: left; /* REMOVE THIS */
    height: auto;
    margin-left: 220px;
    margin-right: 30px;
    overflow: hidden;
    width: 80%; /* THIS */
}

希望有帮助

【讨论】：

非常感谢，成功了！浮动绝对是问题所在。我也不需要介绍宽度：80%；只是摆脱浮动允许容器适合视口的剩余宽度。

【解决方案2】：

在 HTML 的标头中添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">。这将有助于根据屏幕大小调整页面大小。

【讨论】：