如果您查看网站：http://cornerstonecastings.com
这是我的第一个响应式网站之一，它是用Wordpress构建的。我遇到的问题是网站上图像的响应性。如果您调整浏览器的大小（我使用的是最新的Chrome），图像会相应调整和缩小，因为它们应该如此。但是当我从iPhone的Safari（或Chrome iOS）查看网站时，图像会水平调整，但它们会拉伸并垂直扭曲。那是为什么？
修改
我在桌面上的最新Safari中查看了该网站，并且发生了相同的垂直拉伸，告诉我这不是特定于移动Safari的。为什么这些图片在Chrome中运行良好，但不适用于Safari？
答案 0 :(得分：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中开发，因为我可能会错过一些在其他浏览器中打破布局的小错误。