如何使背景图像合适？

Question

如何制作合适的背景图片？我的图像尺寸是 1920x750 期待这就是我的期待

这就是我得到的在此处输入图像描述

它切断了我的形象

.banner1 {
  background: url('https://picsum.photos/1000/300');
  background-repeat: no-repeat;
  min-height: 750px;
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  justify-content: end;
  padding: 8% 5%;
  align-items: end;
  background-position: center;
  h5 {
    font-weight: 700;
    font-size: 50px;
  }
  span {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 23px;
  }
}

<section class="banner1">
  <h5>Test1</h5>
  <span>Test1 subtitle</span>
  <div>Discover More</div>
</section>
<section class="banner2">
  <h5>Test1</h5>
  <span>Test2 subtitle.</span>
  <div>Discover More</div>
</section>
<section class="banner3">
  <h5>Test3</h5>
  <span>Test3 subtitle</span>
  <div>Discover More</div>
</section>

Answer 1

您要查找的 CSS 属性称为

background-size

。从您附加的图像来看，您似乎需要将

background-size: contain;

添加到您的

.banner1

类中。有关此属性的更多信息，请参阅 MDN 文档此处