3

如果你看看这个网站：http ://cornerstonecastings.com

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

编辑：

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

4

1 回答 1

2

这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 中开发，因为我可能会错过一些破坏其他浏览器布局的小错误。

于 2013-06-02T07:02:03.077 回答