Question

1024px容器内的100vw图像导致水平滚动较小。

预期：图像已满页面，而没有引起水平滚动条。

它似乎工作得很好，但是我得到了一个很小的水平滚动。

我发现的其他相关答案似乎并未解决这个问题。

.container {
    max-width: 1024px;
    width: 98%;
    margin: 0 auto;
}
.full-image{
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

HTML缩短

<div class="container">
 <figure>
   <img src="..." class="full-image">
 </figure>
</div>

100vw可能不是垂直滚动条的原因吗？我想这是发生的许多其他事情之一，但是希望有人已经解决了这个问题，并且最清楚地知道这可能是什么造成它。

Answer 1

最简单的答案是在您的body标签本身上实现overflow-x: hidden;。如果您没有用例，网站应该水平滚动，那么应该没有任何问题。

Answer 2

overflow: hidden;隐藏水平滚动条

.container {
    max-width: 1024px;
    width: 98%;
    margin: 0 auto;
    overflow: hidden;
}
.full-image{
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

<div class="container">
 <figure>
   <img src="https://chainimage.com/images/1024-x-1024-464-kb-color-jpeg.jpg" class="full-image">
 </figure>
</div>

1024px容器内的100vw图像导致水平滚动小

2 个答案: