响应网站形象的问题

Question

：http://cornerstonecastings.com

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

编辑：

我所浏览的站点在最新的Safari我的桌面上，并在同一垂直拉伸情况，告诉我，这是不是移动Safari浏览器专用。为什么这些图像在Chrome中运行良好，但没有Safari？

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