使用 css 和 bootstrap 重新调整图像缩略图的大小答案

【问题标题】：Re-sizing image thumbnails with css and bootstrap使用 css 和 bootstrap 重新调整图像缩略图的大小
【发布时间】：2021-11-10 12:06:45
【问题描述】：

我在一个使用 Nunjucks 构建的网站中包含图像，如下所示：

.card-img-top {
  min-height: 0.1px;
}

img.list-group-img {
  width: 100%;
  height: auto;
}

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div class="list-group-item">
  <div class="row">
    <div class="col-12 col-md-4 vertical-center-col">
      <img class="img-thumbnail" src="https://via.placeholder.com/800.jpg" alt="">
    </div>
    <div class="col-12 col-md-8 mt-2 mt-md-0">
      <strong>EmployeeOne</strong>
    </div>
  </div>
</div>

但是width和height属性没有任何作用……

然后我怎样才能确保我的所有图像都以相同的大小显示？

这是我的css 内容：

.card-img-top {
  min-height: 0.1px;
}

img.list-group-img {
  width: 100%;
  height: auto;
}

【问题讨论】：

标签： html css image bootstrap-4 nunjucks

【解决方案1】：

有几个选项，具体取决于您的图像是否具有一致的比例 - 例如一些肖像、一些风景和一些正方形？

如果它们都是不同的比例，那么最好的办法是拥有一个固定尺寸的容器，并为里面的图像使用object-fit：

.thumbnail-container {
  width:200px;
  height:200px;
}

img.thumbnail {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

<div class="thumbnail-container">
  <img src="https://www.rspcansw.org.au/wp-content/uploads/2017/08/50_a-feature_dogs-and-puppies_mobile.jpg" class="thumbnail" />
</div>

【讨论】：

非常感谢。让我更新我的问题，因为我确实有几个容器和 div，当我影响你的建议时，它会弄乱我文件的其余部分。请查看更新后的问题，如果您可以建议一种新方法来使我的照片保持一致。
您在标记中使用的类是 img-thumbnail，但您的 CSS 选择器是 list-group-img。我会先更新它
感谢您的提醒。我更新了那个。但似乎我所能做的就是用height: 65%而不是height: auto之类的东西调整高度，这会拉伸图像......
很难说没有看到更多的 CSS。如果您使用height:auto，请将其与width:100% 结合使用（反之亦然）以按比例缩放。

【解决方案2】：

这是另一种方式。我只是用css伪类

.images {
  width: 170px;
  height: 200px;
  position: relative;
}

.images:before {
  content: '';
  position: absolute; 
  background-image: url('https://www.rspcansw.org.au/wp-content/uploads/2017/08/50_a-feature_dogs-and-puppies_mobile.jpg');
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: cover; 
  height: 100%;
  width: 100%;
}

&lt;div class="images" &gt;&lt;/div&gt;

另一种不用css伪类的方式，也可以用于多张图片

.images {
    width: 170px;
    height: 200px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

&lt;div style="background-image: url('https://www.rspcansw.org.au/wp-content/uploads/2017/08/50_a-feature_dogs-and-puppies_mobile.jpg');" class="images"&gt;&lt;/div&gt;

【讨论】：