html - 最大宽度：100% + 最大高度：100% 在 iPad 上不起作用

Question

左侧的产品框有 class product_pic，并包含一个img带有以下 CSS 属性的标签：

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

这是为了确保图像按比例适合框。

它在 PC 上的 Chrome、Firefox 和所有其他适当的现代浏览器中完美运行：

在此处输入图像描述

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

在此处输入图像描述

我认为这是移动 Safari 中的一个渲染问题，但我不知道如何解决它。删除任何一个 max-width\max-life 属性都会恢复图像，但显然没有所需的功能。我该如何解决这个问题？

score 0 · Accepted Answer

我记得，这是通过将 html/body 标签设置为宽度/高度 100% 来解决的。

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

并且不要忘记将所有 div 设置为应该对宽度/高度 100% 有效的 div。

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

score 0 · Accepted Answer

几点建议。除了使用"overflow:hidden"，您可以尝试添加宽度和高度的默认值，或者简单地通过使用"width:auto"或"height:auto"两者来玩。您可能还想设置"float:left".

希望这可以解决您的问题（至少部分解决）。

快乐编码:)

2 回答 2