如何让1920x750尺寸的背景图片完美适配容器？

你遇到的核心问题是容器与图片的宽高比不匹配：图片比例为1920:750（约2.56:1），但你的容器用min-height:750px+width:100%的组合，当视窗宽度不等于1920px时，容器宽高比会偏离图片比例，导致cover裁切、contain留白的情况。

方案：固定容器宽高比，匹配图片比例 #

利用CSS中padding-top百分比基于父元素宽度计算的特性，让容器高度随宽度按图片比例自适应，彻底解决比例不匹配问题。

步骤1：计算图片比例

图片高宽比换算为百分比：750 / 1920 * 100% = 39.0625%，将此值设为容器的padding-top，替代固定高度。

步骤2：修改布局代码

以下提供两种实现方式，可根据需求选择：

方式一：绝对定位内容（兼容性好）

.banner1 {
  position: relative; /* 为内部绝对定位提供参考 */
  width: 100%;
  padding-top: 39.0625%; /* 匹配图片宽高比 */
  background: url('你的1920x750图片地址') no-repeat center center;
  background-size: cover;
  color: #FFFFFF;
}

.banner1 .content {
  position: absolute;
  bottom: 8%; /* 对应原布局的底部内边距 */
  right: 5%; /* 对应原布局的右侧内边距 */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.banner1 h5 {
  font-weight: 700;
  font-size: 50px;
  margin: 0 0 10px 0;
}

.banner1 span {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 23px;
  margin: 0 0 15px 0;
}

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

方式二：Flex+伪元素占位（无绝对定位）

.banner1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 5% 8%;
  color: #FFFFFF;
}

.banner1::before {
  content: '';
  padding-top: 39.0625%;
  order: -1; /* 将占位伪元素放到内容前 */
  background: url('你的1920x750图片地址') no-repeat center center;
  background-size: cover;
}

.banner1 h5 {
  font-weight: 700;
  font-size: 50px;
  margin: 0 0 10px 0;
}

.banner1 span {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 23px;
  margin: 0 0 15px 0;
}

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

效果说明 #

两种方式都能让容器始终保持与图片一致的宽高比，此时background-size: cover会让图片完美填充容器，既不会裁切也不会出现留白，同时适配不同宽度的视窗。

内容的提问来源于stack exchange，提问作者Code for life