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

Posted 2023-03-07

【中文标题】将 DIV 设置为背景图像的大小

【英文标题】：Set DIV to size of background-image

【发布时间】：2021-12-27 07:55:28

【问题描述】：

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

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

为了进行测试，我提供了一个准备好的 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>

【问题讨论】：

您需要 javascript 来确定图像的纵横比并调整其 CSS。我制作了一个 demo 来说明这一点（拖动右下角调整大小）

如何将宽度：100% 和高度：100% 设置为紫色 div？

如果我们这样做，紫色框将填满 flex 提供的可用空间，但是我们需要从背景图像中获取空间。而且在这种情况下使用javascript也会有问题。这不是一个很好的解决方案，因为我们有服务器端渲染，并且使用这种方法可能会导致内容布局转移

【参考方案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% 的高度，我也这样做了，但如果您希望它与行保持一致，您可以将高度设置为与行高相同。

【讨论】：

如果您在全屏模式下检查您的解决方案，您会发现第二个框与其他两个框在高度方面没有正确对齐

正如我所说，我确实保持高度添加 100% bc 我虽然你只是希望它的宽度被固定但要修复高度你只需要删除“高度：100%;”在.bk-image css 样式