如何使用 CSS 添加拉伸网页宽度的背景图像？

Question

但这并没有那么简单。我的意思是，如何将图像拉伸到网页的宽度，但只占页面的 33%（看起来不失真）。我想用 3 个不同的背景图片填充我的网页。

我的问题是，我是否需要将图像预先编辑到一定的长度和宽度，以免它们看起来变形？或者我只是错过了什么？

我正在学习 freecodecamp 并尝试创建一个包含三个部分的作品集，每个图像都用作该特定部分的背景。

我一直在研究 Stack Overflow、W3 学校，并在 codepen.io 中修改不同的代码片段。我确实尝试使用照片编辑器调整图像大小，然后尝试将它们添加到我的页面。他们看起来仍然扭曲和怪异。

恐怕我卡住了。谁能给我指出一个好的资源或提供任何见解？

Answer 1

window 身高的 33%？

// HTML
<div class="container">
    <div class="img first-background"></div>
    <div class="img second-background"></div>
    <div class="img third-background"></div>
</div>

// CSS
.img{
    width: 100%;
    height: 33vh; // vh means ViewHeight, 33% of your window height
    background-size: cover;
    background-position: center;
}

.first-background{ background-image: url('/a-link-to-your-image.jpg') }
.second-background{ background-image: url('/a-second-link-to-your-image.jpg') }
.third-background{ background-image: url('/a-third-link-to-your-image.jpg') }

如何使用 CSS 添加拉伸网页宽度的背景图像？

How do I add a background image that stretches the width of a webpage, using CSS?

html

css

image

codepen