'having equal item heights in a column

I want to have such a gallery, with the thumbnails having the equal height along the main column, despite the different height of the images. i tried having a <div> around every picture and setting the height on them. but I didn't get the desired result. Any idea?

/* PLEASE see the snippet in Full size */

.gallery .gal-ver .gal-ver-border {
    border: 1px solid #707070;
    border-radius: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
}
.gallery .gal-ver img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    padding: 5px;
}
.gallery .imgWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #707070;
    border-radius: 15px;
}
.gallery .mainimg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 15px 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <title>[product-name]</title>
</head>
<body>


<div class="gallery d-flex">
   <div class="gal-ver">
    <div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
   </div>                      
   <div class="col-md-12 col-lg-9 imgWrap">
     <img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
   </div>
  </div>

html css

Solution 1:^[1]

First you should set a fixed height on the parent div .gal-ver-border, this will make sure all the gallery items have the save height

After doing this you will notice that the images aspect-ratio brakes, to solve this just add object-fit: contain; to the images style

in the result the following CSS should be added:

.gallery .gal-ver .gal-ver-border {
  height: 290px; /* or any other value */
}

.gallery .gal-ver .gal-ver-border img {
  object-fit: contain;
}

Solution 2:^[2]

Try this:

.gallery .gal-ver .gal-ver-border {
   border: 1px solid #707070;
   border-radius: 10px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
}

Solution 3:^[3]

With this structure, you can use flex-basis so your main img uses up more space, and for the small img u can go with a height of 20% but as you can see I used a calc(20% - 4px) just to explain the 4px, you have a margin of 5px and a border of 1px around the img so to make them even height with the main img, you have to take that in consideration too. Also added a :not(:first-of-type) selector, so the first img doesn't need the top margin.

.gallery .gal-ver .gal-ver-border {
    border: 1px solid #707070;
    border-radius: 10px;
    display: flex;
    margin-bottom: 5px;
}

.gallery .gal-ver .gal-ver-border:not(:first-of-type) {
    margin-top: 5px;
 }

.gal-ver > * {
    height: calc(20% - 4px);
 }

.gallery .gal-ver img {
    object-fit: contain;
    width: 100%;
    border-radius: 10px;
    display: block;
    padding: 5px;
}
.gallery .imgWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #707070;
    border-radius: 15px;
    margin-left: 5px;
    flex: 0 0 80%;
}
.gallery .mainimg {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 15px 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <title>[product-name]</title>
</head>
<body>


<div class="gallery d-flex">
   <div class="gal-ver">
    <div class="gal-ver-border"><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
    <div class="gal-ver-border"><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
    <div class="gal-ver-border"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
   </div>                      
   <div class="col-md-12 col-lg-9 imgWrap">
     <img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
   </div>
  </div>

Solution 4:^[4]

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Having equal heights in column - sof question 15-May-2022</title>
  <style>
    
    .gallery {
      display: inline-flex;
      /* background-color: lightblue; */
      padding: 10px;
    }
    
    img:not(.display-img) {
      height: 50px;
      width: 50px;
      margin: 5px;
      padding: 5px;
      border: 1px solid hsl(0, 0%, 65%);
    }
    
    .display-div {
      border: 1px solid hsl(0, 0%, 65%);
      padding: 10px 20px;
      margin: 5px 10px;
    }
    
    .display-img {
      height: 200px;
      width: 200px;
      margin-top: 22%;
    }
    
    img,
    .display-div {
      border-radius: 5px;
    }
  </style>



</head>

<body>

  <div class="gallery">
    <div class="display-div">
      <img class="display-img" src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg">
    </div>
    <div class="">
      <div class=""><img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
      <div class=""><img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"></div>
      <div class=""><img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"></div>
      <div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&usqp=CAU"></div>
      <div class=""><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&usqp=CAU"></div>
    </div>
  </div>

</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Joshua
Solution 2	Cristian Jara
Solution 3	zeljkoDe
Solution 4	Nizamuddin Shaikh

'having equal item heights in a column

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]