如何使用Bootstrap flex类将div尺寸设置为与背景图片匹配且缩放时保持一致

解决方案 #

核心思路 #

利用CSS固定容器和背景图一致的宽高比，同时调整容器布局属性，保证二者缩放时尺寸始终完全匹配。

具体修改代码 #

1. CSS部分

.page-container {
  width: 100vw;
  height: 50vh;
}
/* 自定义第二列布局属性，避免被其他列挤压尺寸 */
.second-col {
  flex: 0 0 auto;
  width: auto;
}
.background-image {
  background: url('https://dummyimage.com/258x362/007aa5?text=Banner-Desktop-Large') center center / cover no-repeat;
  /* 固定和背景图完全一致的宽高比 */
  aspect-ratio: 258 / 362;
  height: 100%;
  width: auto;
  background-origin: content-box;
  display: flex;
  align-items: flex-end;
}

2. HTML部分

仅需给第二个col列添加自定义类second-col即可：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-container">
  <div class="row w-100 h-100">
    <div class="col-4 bg-primary">
      <p>Box 1</p>
    </div>
    <!-- 新增自定义类second-col -->
    <div class="col-4 second-col">
      <div class="background-image">
        <div style="background: purple;width:100%">
          <div class="d-flex justify-content-around" style="color: rgb(255, 255, 255)">
            <div class="d-flex flex-column">
              <div>Tage</div>
              <div>16086</div>
            </div>
            <div class="d-flex flex-column">
              <div>Stunden</div>
              <div class="">6</div>
            </div>
            <div class="d-flex flex-column">
              <div>Minuten</div>
              <div>13</div>
            </div>
            <div class="d-flex flex-column">
              <div>Sekunden</div>
              <div>34</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 bg-secondary">
      <p>Box 3</p>
    </div>
  </div>
</div>

低版本浏览器兼容方案 #

如果需要兼容不支持aspect-ratio属性的旧浏览器，可以用padding占位法替代：

.background-image {
  background: url('https://dummyimage.com/258x362/007aa5?text=Banner-Desktop-Large') center center / cover no-repeat;
  height: 0;
  /* 按背景图高/宽百分比计算占位值：362/258*100 ≈ 140.3% */
  padding-top: 140.3%;
  width: auto;
  position: relative;
}
.background-image > div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

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