背景图显示异常：contain留空、cover裁剪如何解决？

你遇到的情况并非操作错误，而是background-size: contain和cover的特性与容器、图片的宽高比不匹配导致的：

• contain会保持图片原有宽高比，尽可能完整显示图片，当容器比例和图片比例不同时，必然会出现留白
• cover会强制填满容器，同样因为比例不匹配，超出容器的图片部分会被裁剪

下面是几种解决思路：

1. 让容器比例匹配图片比例 #

这是最理想的方案，既能完整显示图片，又能填满容器。可以通过padding-top百分比实现响应式的固定比例容器（百分比基于父元素宽度计算）：

假设你的目标图片宽高比为 3:2（可根据实际图片调整），修改CSS如下：

body {
  text-align: center;
  margin: 0;
}

.hero {
  background-image: url("https://img.theculturetrip.com/450x/smart/wp-content/uploads/2018/07/shutterstock_697606678.jpg");
  background-size: cover; /* 或contain，此时两者效果一致 */
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  /* 用padding-top实现固定比例：高度/宽度*100%，这里2/3≈66.67% */
  padding-top: 66.67%;
  height: 0;
}

这样容器的宽高比会和图片一致，图片能完整填满容器且无裁剪。

2. 强制拉伸图片填满容器（会变形） #

如果可以接受图片轻微变形，直接设置background-size: 100% 100%：

.hero {
  background-image: url("https://img.theculturetrip.com/450x/smart/wp-content/uploads/2018/07/shutterstock_697606678.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 300px;
}

这种方式会让图片完全贴合容器尺寸，但会破坏原有宽高比。

3. 使用img标签替代背景图（更灵活） #

把图片作为<img>元素放入容器，配合object-fit属性控制显示方式：

<body>
  <div class="hero">
    <img src="https://img.theculturetrip.com/450x/smart/wp-content/uploads/2018/07/shutterstock_697606678.jpg" alt="hero image">
  </div>
</body>

body {
  text-align: center;
  margin: 0;
}

.hero {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 或cover、fill，按需选择 */
  object-position: center;
}

这种方式比背景图更易控制，也方便后续添加交互。

内容的提问来源于stack exchange，提问作者Coca Coffee