如何设置CSS背景宽度为div的50%且保持图片比例不拉伸变形

你当前代码出现拉伸的核心原因是background-size同时指定了固定宽高值，强制图片适配两个维度的尺寸，破坏了原始比例。推荐用伪元素方案实现需求，兼容性和效果稳定性更好：

修改后的完整CSS代码 #

.bg {
  position: relative; /* 新增：作为伪元素的定位参照 */
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
}

/* 新增伪元素承载背景 */
.bg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%; /* 相对于父容器宽度的50%，如果你的.bg是满屏容器，替换为50vw也可 */
  height: 100%;
  background: url(../img.png);            
  background-position: center;
  background-size: cover; /* 保持比例完全覆盖区域，多余部分自动裁剪 */
  background-repeat: no-repeat;
  z-index: 0; /* 背景置于底层 */
}

/* 给内部容器加层级，避免被背景遮挡 */
.bg > .container-xl {
  position: relative;
  z-index: 1;
}

方案说明 #

• 伪元素宽度固定为父容器的50%、高度撑满父容器，完全符合左边缘到容器中心的尺寸要求
• 背景使用原生background-size: cover特性，自动保留图片原始比例，不会出现拉伸、压缩问题
• 层级设置保证背景不会遮挡容器内部的业务内容

如果不想新增伪元素，也可以直接调整背景属性，仅适合容器高度不会超过图片按50%宽度计算出的高度的场景：

.bg {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  background: url(../img.png);            
  background-position: left center;
  background-size: 50% auto; /* 宽度50%，高度按比例自动计算 */
  background-repeat: no-repeat;
}

局限性：如果容器高度过高，图片按比例计算出的高度不足以覆盖容器，会出现上下露白的问题，优先推荐伪元素方案。

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