Bootstrap 4 固定图像高度答案

【问题标题】：Bootstrap 4 fixed image heightBootstrap 4 固定图像高度
【发布时间】：2020-02-25 23:27:46
【问题描述】：

我正在使用 Bootstrap 的 4 网格系统将 unsplash.com 中随机大小的图像显示到网页中。

我遇到的问题是，我不知道如何为所有图像制作固定大小的缩略图，无论它们的高度如何，但同时将其放入容器中。

这是一个示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
</head>

<body>
  <div class="container-fluid mt-5 py-3 py-md-5">
    <div class="row text-center text-lg-left">
      <div class="col-lg-3 col-md-4 col-6">
        <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
          <img class="image-card img-fluid img-thumbnail" src="" alt="" />
        </a>
      </div>
      <div class="col-lg-3 col-md-4 col-6">
        <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
          <img class="image-card img-fluid img-thumbnail" src="" alt="" />
        </a>
      </div>
      <div class="col-lg-3 col-md-4 col-6">
        <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
          <img class="image-card img-fluid img-thumbnail" src="" alt="" />
        </a>
      </div>
      <div class="col-lg-3 col-md-4 col-6">
        <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
          <img class="image-card img-fluid img-thumbnail" src="" alt="" />
        </a>
      </div>
    </div>
  </div>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
    const imageCards = document.querySelectorAll(".image-card");
    const url = "https://source.unsplash.com/collection/308700/300/?sig=";

    const randomNum = () => {
      return Math.floor(Math.random() * 100000);
    };

    for (let image of imageCards) {
      let src = `${url}${randomNum()}`;
      image.setAttribute("src", src);
    }
  </script>
</body>

</html>

是否有任何引导程序特定类我可以应用以具有相同的图像高度并将其放入它的父 div 中？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

我使用padding top trick 给我图像的纵横比，然后我可以绝对地将图像定位在锚点内并在其上使用object fit（可能需要一个polyfill 用于ie）：

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');

/* use classes instead of these element selectors */

a {
  display: block;
  padding-top: 56.25%;
  position: relative;
}

a>img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="container-fluid mt-5 py-3 py-md-5">
  <div class="row text-center text-lg-left">
    <div class="col-lg-3 col-md-4 col-6">
      <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
        <img class="image-card img-fluid img-thumbnail" src="https://www.fillmurray.com/200/300" alt="" />
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
        <img class="image-card img-fluid img-thumbnail" src="https://www.fillmurray.com/300/300" alt="" />
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
        <img class="image-card img-fluid img-thumbnail" src="https://www.fillmurray.com/300/200" alt="" />
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-6">
      <a asp-area="" asp-controller="Galerie" asp-action="FotoNunta">
        <img class="image-card img-fluid img-thumbnail" src="https://www.fillmurray.com/200/400" alt="" />
      </a>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

一种解决方案是为 img-thumbnail 设置一个高度，然后给它一个适合的对象：

<style>
.img-thumbnail {
  height: 350px;
  object-fit: cover;
}

【讨论】：