響應網站形象的問題

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中開發，因爲我可能會錯過一些破壞其他瀏覽器佈局的小錯誤。