最大宽度：100％+最大高度：100％不适用于iPad

Question

看看这个网址： http://www.preen.me/product/1113142/

左侧的产品框包含类product_pic，并包含带有这些CSS属性的img标记：

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

这是为了确保图像按比例放入框中。

它完美适用于Chrome，Firefox和PC上所有其他适当的现代浏览器：

它不适用于移动版Safari。具体来说，如果您尝试在横向模式的 iPad上查看此页面，图像就会消失：

我认为这是移动Safari中的渲染问题，但我对如何解决它感到茫然。删除max-width \ max-life属性中的任何一个都会带回图像，但显然没有所需的功能。我怎么能绕过这个？

Answer 1

我记得，通过将html / body标签设置为宽度/高度100％来解决这个问题。

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

并且不要忘记将所有div设置为div应该具有效果宽度/高度100％。

您也可以尝试将html，body设置为position：relative。我不再确定这个。

Answer 2

一些建议。除了使用"overflow:hidden"，您可以尝试添加宽度和高度的默认值，或者只使用"width:auto"或"height:auto"或两者来玩游戏。您可能还想设置"float:left"。

希望这能解决你的问题（至少部分解决）。

快乐的编码：）