将 DIV 设置为背景图像的大小

Question

所以我想弄清楚，如何将第二个框的大小（见截图）设置为背景图像的大小。我正在使用引导程序，它正在构建弹性类。也许你们可以在这里帮助我。

基本上我想要的是紫色框与背景图像大小相同，并且在调整屏幕大小时保持相同大小。

为了进行测试，我提供了一个准备好的 Stackblitz 环境：https://stackblitz.com/edit/javascript-rs3ykl?file=index.html

.page-container {
  width: 100vw;
  height: 50vh;
}

.background-image {
  background: url('https://dummyimage.com/258x362/007aa5?text=Banner-Desktop-Large') center center / contain no-repeat;
  height: 100%;
  width: auto;
  background-origin: content-box;
}

<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>
    <div class="col-4">
      <div class="background-image">
        <div style="background: purple">
          <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>

Answer 1

我认为最好使用图像标签而不是带有 div 的 url。所以我就这样改了

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>
<style>
  .page-container {
    width: 100vw;
    height: 50vh;
  }

  .background-image {
    height: 100%;
    width: auto;
    background-origin: content-box;
  }
  .bk-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
</style>
<div class="page-container">
  <div class="row w-100 h-100">
    <div class="col-4 bg-primary"><p>Box 1</p></div>
    <div class="col-4">
      <div class="background-image">
        <div style="background: purple">
          <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>
        <img class="bk-image" src = "https://dummyimage.com/258x362/007aa5?text=Banner-Desktop-Large">
      </div>
    </div>
    <div class="col-4 bg-secondary"><p>Box 3</p></div>
  </div>
</div>

现在紫色条与背景图片保持一致，因为您使用了 100% 的高度，我也这样做了，但如果您希望它与行保持一致，您可以将高度设置为与行高相同。