css - 使用 Bootstrap/CSS 缩放不同大小的图像

Question

我有一个像这样的 Web 应用程序布局，使用 Bootstrap 设置样式:

------------------------
|        Header        |
------------------------
|     Display Area     |
------------------------

Header 是控制元素(主要是按钮)的集合，因此高度几乎相同。

显示区域包含以下内容:

<div class="row">
  <div class="col">
    <img class="img-fluid" src="http://localhost/api/currentImage" />
  </div>
</div>

http://localhost/api/currentImage返回图像。图片的大小总是不同的:有时宽度大于高度，有时反之亦然。

现在我想以尽可能多地使用可用显示的方式缩放图像，而不会“溢出”。溢出是指永远不需要显示水平或垂直滚动​​条，因为图像太宽或太高。现在，<img class="img-fluid" ...只能正确缩放宽度。

如何使用 Bootstrap/CSS 实现此目的？

Answer 1

Bootstrap 允许您使用其 img-fluid 类调整图像大小，但如果您需要使图像覆盖整个空间，则必须编写自己的 CSS，您可以使用object-fit 属性设置图像填充容器，同时保持其宽高比并在必要时剪掉；

正如您在下面的示例中看到的，图像很窄，但它会填满整个容器，即使它必须展开才能做到这一点。

编辑:包含了另外两个示例，其中包含fill 和contain，这样您就可以看到它们的行为是如何变化的。

header {
  border: 1px solid red;
  padding: 10px;
}

section {
  border: 1px solid blue;
}

img {
  height: calc(100vh - 20px);
  width: 100%;
  /* This is just to remove a blank space at the bottom of the image */
  display: block;
}

img.cover {
  object-fit: cover;
}

img.contain {
  object-fit: contain;
}

img.fill {
  object-fit: fill;
}

<header>
  This is a header
</header>

<section>
  <img class="cover" src="https://via.placeholder.com/200x700" />
</section>

<section>
  <img class="contain" src="https://via.placeholder.com/200x700" />
</section>

<section>
  <img class="fill" src="https://via.placeholder.com/200x700" />
</section>