Question

我最近开始学习HTML和CSS，并在制作网站方面进行练习。昨天在部分中添加了顶部/底部的边距后，我的标题图片大于100vw。我不知道是什么原因造成的。如今，即使消除利润也无法解决问题。

项目：https://akinunal.github.io/project-3/

代码：https://github.com/akinunal/project-3

Answer 1

更改CSS：使用100％而不是100vw的宽度。

.header-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(images/slider-image1.jpg);
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 650px;
    position: relative;
}

Answer 2

这是预期的行为。您为div设置了固定的高度和宽度100vw，其背景图像带有background-size: cover;。这意味着bg图像应填充整个div。为了保留图像的长宽比，浏览器将缩放图像并对其进行裁剪而不拉伸。

来自MDN：

如果图像的比例与元素不同，则会垂直或水平裁剪图像，以确保没有空白空间。

PS：在您的情况下，您根本不需要width属性，因为默认情况下div的宽度为100％。

Answer 3

由于溢出（内容大于容器），出现滚动条。这些滚动条也占用了空间（50 px），而没有减小VW大小。

背景图片宽度大于100vw

3 个答案: