html - 删除 img 宽度为 100vw 的水平滚动条的最佳解决方案？

Question

设置 <img> 的宽度到 100vw 会导致水平滚动条出现在视口(viewport)底部，我发现摆脱后者的唯一可行解决方案是使用 overflow-y: overlay;。但是，我读到这个解决方案不是最佳的。什么是更好的选择？

body {
  margin: 0;
  overflow-y: overlay;
}

Answer 1

出现水平滚动是因为这只是 Windows 上的问题。在 Mac 或 Android 上，滚动条位于内容的顶部并在您完成滚动后消失，因此它们不会影响 View 宽度。

如果 max-width: 100% 是没有滚动条的视口(viewport)宽度，那么您一开始就不需要 100vw。

您可以只使用宽度:100%，因为该元素没有任何定位的祖先，所以它的引用是主体。

针对您的情况，一个简单的解决方案是提供 max-width: 100%。

HTML 会像:

<div class="box">
    .
    .
    .
</div>

使用这个 CSS:

html, body {
    margin: 0;
    padding: 0
}
    .box {
        width: 100vw;
        max-width:100%; // This is very Important.
        height: 100vh;
    }