最大寬度：100％+最大高度：100％在iPad上不起作用

Question

看看這個網址： http : //www.preen.me/product/1113142/

左側的產品框具有product_pic類，並包含具有以下CSS屬性的img標簽：

max-width: 100%;
max-height: 100%

這是為了確保圖像按比例適合在框中。

它可以完美地在PC上的Chrome，Firefox和其他所有合適的現代瀏覽器中運行：

它在移動Safari中不起作用。 具體來說，如果您嘗試以橫向模式在iPad上查看此頁面，則圖像只會消失：

我認為這是移動Safari中的渲染問題，但我對如何解決它感到茫然。 刪除max-width \\ max-life屬性之一會恢復圖像，但顯然沒有必需的功能。 我該如何解決？

Answer 1

我記得，這是通過將html / body標簽設置為width / height 100％來解決的。

html,body{
    width: 100%;
    height: 100%;
}

並且不要忘記將所有div設置為應該對寬度/高度100％有效的div。

您也可以嘗試將html，body設置為position：relative。 我對此再也不確定。

Answer 2

一些建議。 除了使用"overflow:hidden" ，您還可以嘗試添加默認的width和height值，或者只是通過使用"width:auto"或"height:auto"或同時使用兩者來進行播放。 您可能還需要設置"float:left" 。

希望這可以解決您的問題（至少部分解決）。

快樂的編碼:)