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

Question

但事情并非那么简单。我的意思是，如何将图像拉伸到网页的宽度，但只占页面的33％（不会看起来扭曲）。我想用3个不同的背景图片填充我的网页。

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

我正在研究freecodecamp，我正在尝试创建一个包含三个部分的投资组合，每个部分都用作该特定部分的背景。

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

我怕我被困住了。有人会指出我是一个很好的资源或提供任何见解？

Answer 1

窗户高度的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') }