如何拉伸背景图铺满div无需保持宽高比且支持响应式

解决方案 #

你要实现「背景图完全铺满div、整张可见无裁剪」的效果，分两种常见场景对应实现方案：

场景1：div宽高由自身内容撑开，允许背景图拉伸变形适配div尺寸

你最开始的思路是对的，修改伪元素的background-size属性即可，未生效大概率是定位属性的兼容问题，修正后的完整代码如下：

div {
  position: relative;
  /* 按需设置div自身的宽高规则 */
}

div::after {
  content: ' ';
  display: block;
  position: absolute;
  /* 修正定位起始点为左上角，避免部分浏览器解析异常 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  background-image: url('/something.svg');
  background-repeat: no-repeat;
  background-position: 0 0;
  /* 100% 100%代表宽度和高度都完全适配容器，会拉伸图片铺满，无裁剪 */
  background-size: 100% 100%;
}

如果设置后仍有留白，优先排查两个点：

• 父div是否设置了overflow: hidden遮挡了伪元素
• 你的SVG源文件是否自带内边距、viewBox属性设置错误

场景2：div仅宽度响应式自适应，希望高度随背景图宽高比自动撑开，背景图无需拉伸变形

这种场景用img标签实现最稳妥，无需提前知道图片比例，完全自适应：

HTML结构

<div class="bg-container">
  <img src="/something.svg" class="bg-layer" alt="">
  <div class="content-layer">
    <!-- 此处放置div内的业务内容 -->
  </div>
</div>

CSS代码

.bg-container {
  position: relative;
  width: 100%; /* 宽度随父级响应式调整 */
}
.bg-layer {
  display: block;
  width: 100%;
  /* 高度随宽度按图片原始比例自动撑开，保证图片完全显示不变形 */
  height: auto;
  opacity: 0.3;
}
.content-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* 按需调整内容内边距 */
  padding: 16px;
}

额外说明

如果你不需要拉伸背景图，仅要求保持图片原始宽高比、整张完全显示不裁剪，可以把background-size设置为contain，这个属性会自动缩放图片到容器能完整放下的最大尺寸，不会出现裁剪，仅可能在容器和图片比例不一致时出现留白。

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