Make images responsive in a grid with a fixed height

Question

I am trying to build a responsive grid of images (title might be added after I make it responsive) with a fixed height. So, the total grid will have a fixed height and I want within this (width will be variable depending on screen size) the images to fit and not overflow. That implies that the size of the images and margins/paddings will be variable.

My first attempt without a fixed height is here:

  .wrapper {
    max-width: 1200px;
    margin: auto;
  }
    
  img {
    background-size: cover;
    max-height: 140px;
    max-width: 140px;
  }
  
  /*Basic Grid Styles*/
  .Grid {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
  }
  
  .u-textCenter {
    text-align: center;
  }
  
  .Grid-cell {
    flex: 1;
  }
  
  .Demo {
    padding: .8em .5em 0;
    margin-bottom: .8em;
    /*border: 1px solid #124;*/
  }
  
  /* With gutters*/
  .Grid--gutters {
    margin-left: -1em;
  }
  
  .Grid--gutters .Grid-cell {
    padding-left: 1em;
  }
  
  .Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
    margin-right: 1em;
  }
  
  /* Justify per row*/
  .Grid--right {
    justify-content: flex-end;
  }
  
  .Grid--center {
    justify-content: center;
  }
  
  /* Alignment per row */
  .Grid--top {
    align-items: flex-start;
  }
  
  .Grid--bottom {
    align-items: flex-end;
  }
  
  .Grid--center {
    align-items: center;
  }
  
  /* Alignment per cell */
  .Grid-cell--top {
    align-self: flex-start;
  }
  
  .Grid-cell--bottom {
    align-self: flex-end;
  }
  
  .Grid-cell--center {
    align-self: center;
  }
  
  .navigation {
    list-style: none;
    /*background: deepskyblue;*/
    background: rgba(102, 51, 255, 0.1);
    margin: 0 0 1em;
    border: 1px solid #33cccc;
    border-radius: 3px;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: flex-end;
  }
  
  .navigation a {
    text-decoration: none;
    display: block;
    padding: 1em;
    color: #333;
  }
  
  .navigation a:hover {
    background: rgba(64, 0, 255, 0.1);
    border-radius: 3px;
  }
  
  .navigation:hover {
    background: rgba(102, 51, 255, 0.25);
  }
  
  @media all and (max-width: 800px) {
    .navigation {
      justify-content: space-around;
    }
  }
  
  @media all and (max-width: 600px) {
    .navigation {
      -webkit-flex-flow: column wrap;
      flex-flow: column wrap;
      padding: 0;
    }
    .navigation a {
      text-align: center;
      padding: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .navigation li:last-of-type a {
      border-bottom: none;
    }
  }
  
  /*===========================================*/
  /* Base classes for all media - Mobile first */
  .Grid--cols-2 > .Grid-cell {
    flex: 0 0 100%;
  }
  
  .Grid--cols-3 > .Grid-cell {
    flex: 0 0 100%;
  }
  
  .Grid--cols-4 > .Grid-cell {
    flex: 0 0 100%;
  }
  
  .Grid--cols-6 > .Grid-cell {
    flex: 0 0 calc(50% - 1em);
  }
  
  .Grid--cols-12 > .Grid-cell {
    flex: 0 0 calc(33.3333% - 1em);
  }
  
  .Grid--holly-grail .aside, .Grid--holly-grail .main {
    flex: 1 100%;
  }
  
  /* One of -- columns*/
  .Grid--1of2 > .Grid-cell,
  .Grid--1of4 > .Grid-cell:first-of-type,
  .Grid--1of3 > .Grid-cell:first-of-type {
    flex: 0 0 100%;
  }
  
  .Grid--1of6 > .Grid-cell:first-of-type {
    flex: 0 0 50%;
  }
  
  .Grid--fit > .Grid-cell {
    flex: 1;
  }
  
  .Grid--full > .Grid-cell {
    flex: 0 0 100%;
  }
  
  /* Tablet (medium) screens */
  @media (min-width: 30em) {
    .Grid--cols-4 > .Grid-cell {
      flex: 0 0 calc(50% - 1em);
    }
    .Grid--cols-6 > .Grid-cell {
      flex: 0 0 calc(33.3333% - 1em);
    }
    .Grid--cols-12 > .Grid-cell {
      flex: 0 0 calc(16.6666% - 1em);
    }
    .Grid--holly-grail .aside {
      flex: 1 calc(25% - 1em);
    }
    .Grid--1of2 > .Grid-cell {
      flex: 0 0 50%;
    }
    .Grid--1of6 > .Grid-cell:first-of-type {
      flex: 0 0 30%;
    }
    .Grid--1of4 > .Grid-cell:first-of-type {
      flex: 0 0 50%;
    }
    .Grid--1of3 > .Grid-cell:first-of-type {
      flex: 0 0 100%;
    }
  }
  
  /* Large screens */
  @media (min-width: 48em) {
    .Grid--cols-2 > .Grid-cell,
    .Grid--cols-3 > .Grid-cell,
    .Grid--cols-4 > .Grid-cell,
    .Grid--cols-6 > .Grid-cell,
    .Grid--cols-12 > .Grid-cell {
      flex: 1;
    }
    .Grid--holly-grail .main {
      flex: 2;
    }
    .Grid--holly-grail .aside {
      flex: 1;
    }
    .Grid--holly-grail .aside-1 {
      order: 1;
    }
    .Grid--holly-grail .main {
      order: 2;
    }
    .Grid--holly-grail .aside-2 {
      order: 3;
    }
    .Grid--1of2 > .Grid-cell {
      flex: 0 0 50%;
    }
    .Grid--1of6 > .Grid-cell:first-of-type {
      flex: 0 0 16.6666%;
    }
    .Grid--1of4 > .Grid-cell:first-of-type {
      flex: 0 0 25%;
    }
    .Grid--1of3 > .Grid-cell:first-of-type {
      flex: 0 0 30%;
    }
    .Grid--gutters.Grid--nested .Grid-cell:first-of-type .Demo {
      margin-right: 0;
    }
  }
  

<div class="Grid Grid--gutters Grid--cols-6 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
  </div>
  <div class="Grid Grid--gutters Grid--cols-6 u-textCenter">
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
    <div class="Grid-cell"><div class="Demo content-1of6"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div></div>
  </div>

and this:

var w = window.innerWidth;
var h = window.innerHeight;

console.log(w);

//if count > 10 then new_w = w/10

.flex-c:after {
    content: '';
    display: table;
    clear: both;
}
.flex-i {
    height: 100px;
    width: 100px;
    background-color: gray;
    margin: 0 10px 10px 0;
    float: left;
}

.flex-i img{height: 100%;width:100%;object-fit: cover;}

<div class="wrap">
    <div class="flex-c">
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
        <div class="flex-i"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
    </div>
</div>

And ideally I will need one grid with a specific height (e.g. 250px) and all the images to be responsive within that height. That implies that the paddings/margins will not make it look visually ugly (columns can be an X number) and that the image size will be variable. Javascript is also welcome if needed. In this case, I am breaking my head to think if there is a way in CSS.

So, my final attempt was to have a masonry gallery as the image sizes might differ:

#container {
    width: 100%;
    max-height: 200px;
    margin: 2em auto;
}
.cols {
    -moz-column-count:8;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:8;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 8;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
    height: 200px;
    background-color: #d77575;
}

.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

img {
    height: 70px;
    width:70px
    background-color: #d77575;
}

<div id="container" class="cols">
    <div class="box one"><img src="https://www.formule1.nl/app/uploads/2019/09/1017718138-LAT-20190908-_R3I4993-720x720.jpg"/></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

And I am guessing I have to focus on the column part of the css and the image size and change them dynamically using JS?

Answer 1

You need to use auto height with 100% width like this:

img.myimageclass{
  width: 100%;
  height: auto;
}

If you want to restrict a responsive image to a maximum size, use the max-width like:

img.myimageclass{
      width: 100%;
      max-width: 400px;
      height: auto;
}

Answer 2

.flex-i img{height: 100%;width:100%;object-fit: cover;}

This will make image responsive will cover parent without change to aspect ratio of image.