响应式网站图片问题

【问题标题】：Responsive site image issues响应式网站图片问题
【发布时间】：2013-10-10 21:56:05
【问题描述】：

这是我的第一个响应式网站之一，它是使用 Wordpress 构建的。我遇到的问题是网站上图像的响应能力。如果您调整浏览器的大小（我使用的是最新的 Chrome），图像会相应地调整和缩小，就像它们应该做的那样。但是，当从我的 iPhone 的 Safari（或 Chrome iOS）查看该网站时，图像会水平调整，但它们会拉伸并垂直扭曲。这是为什么呢？

编辑：

我在桌面上最新的 Safari 中查看了该网站，并且发生了相同的垂直拉伸，告诉我这不是移动 Safari 特定的。为什么图片在 Chrome 中运行良好，而在 Safari 中运行不佳？

【问题讨论】：

标签： image google-chrome web-applications safari responsive-design

【解决方案1】：

导致这种情况发生的是height: 100%。要使图像按比例缩放，它们需要 height 值 auto。

选择器位于 style.css 中的第 468 行附近。更改height：

div.main-content img {
    height: auto; /* add !important if height is set inline on the image */
}

至于为什么会在 Safari 而不是 Chrome 中发生这种情况；我不确定，但我注意到 Chrome 经常接受 CSS 中的错误并将它们转换为正确的。我想这是一个经常使用的好功能，但它让我不喜欢在 Chrome 中开发，因为我可能会错过一些破坏其他浏览器布局的小错误。

【讨论】：