响应式网站图像问题

如果你看一下该网站：http://cornerstonecastings.com http://cornerstonecastings.com

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

Edit:

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

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