Re-sizing image thumbnails with css and bootstrap-CodePudding

I am including images in a website built with Nunjucks as follows:

.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>

But the width and height attributes do not have any effects...

How can I then make sure all my images appear with the same size?

This is my css content:

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

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

CodePudding user response：

There are a few options, depending on whether your images are a consistent ratio - e.g are some portrait, some landscape and some square?

If they're all different ratios your best best is to have a container with fixed dimensions, and use object-fit for your images inside:

.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>

CodePudding user response：

This is an alternative way. I just used css pseudo classe

.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%;
}

<div class="images" ></div>

Another way without css pseudo class, and it can also use for multiple images

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

<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"></div>