如何实现背景图横向撑满容器宽度同时保留原始高度？

你的需求是实现SVG背景横向拉伸铺满容器宽度、纵向重复平铺，且每个平铺单元的高度和SVG原始高度一致，之前写法失效有两个原因：一是硬编码的33px和SVG实际固有高度不匹配，二是背景相关样式只加在了第二个子元素上，没有应用到所有.child节点。

可用方案 #

方案1：直接修正CSS（无需修改SVG，最快生效） #

1. 先确认你使用的SVG的原始高度：打开SVG文件，查看根<svg>标签上的height属性值，这个就是图片的固有高度。
2. 把背景相关样式统一写到.child通用选择器下，不要单独给某个子元素加，background-size的高度值填你查到的SVG实际高度即可：

div.child {
  background-image: url("https://assets-marvin.leadsquared.com/smartviews/images/column.svg");
  background-repeat: repeat-y;
  /* 宽度100%拉满容器，高度填SVG实际原始高度，比如实际高度是33px就写33px */
  background-size: 100% 33px;
}

3. 删掉之前写在.child:nth-child(2)、.child:nth-child(3)里的背景相关样式，避免覆盖通用规则。

方案2：适配SVG自动变更（无需硬编码CSS高度值） #

如果后续可能更换SVG，不想每次都改CSS里的高度数值，可以修改SVG源文件，给根<svg>标签添加两个属性：

<svg 
  <!-- 保留原有其他属性 -->
  width="100%"
  height="33" <!-- 这里填SVG本身的原始高度数值 -->
  preserveAspectRatio="none" <!-- 允许SVG横向拉伸变形 -->
>

修改后CSS里不需要写死高度像素值，直接用auto即可，浏览器会自动读取SVG声明的固有高度：

div.child {
  background-image: url("你的SVG路径");
  background-repeat: repeat-y;
  background-size: 100% auto;
}

修正后完整代码 #

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

div {
  border: 5px solid indianred;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
}

div.child {
  background-image: url("https://assets-marvin.leadsquared.com/smartviews/images/column.svg");
  background-repeat: repeat-y;
  /* 替换33px为你所用SVG的实际原始高度即可 */
  background-size: 100% 33px;
}

.child:nth-child(1) {
  flex: 1;
}

.child:nth-child(2) {
  flex: 2;
}

.child:nth-child(3) {
  flex: 3;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

提示：不要估算SVG的高度值，直接读取SVG根节点的height属性填写，否则会出现高度不匹配、拉伸错位的问题。

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