How to make aspect ratio of image tag in grid?

Question

I have six images and I want to keep aspect ratio of 1.6.

The problem is I'm using grid: 3 columns (1fr 1fr 1fr) in row. can be change to 2 columns (1fr 1fr) in row by media query.

I have try to play with some css property like set image height and width of 100%, but the columns are change and the image are grow.

How to solve this with css grid and keep of 1.6 aspect ratio? (and not change to background just image tag)

here my code in Codepen

<h1>all the images should be fill the width of the div. with aspect ratio of 1.6 and they need to be img tag.</h1>
<div class="grid">
  <div><img src="https://picsum.photos/200/300?a"></div>
  <div><img src="https://picsum.photos/200/300?b"></div>
  <div><img src="https://picsum.photos/100/300?c"></div>
  <div><img src="https://picsum.photos/200/200?d"></div>
  <div><img src="https://picsum.photos/200/300?e"></div>
  <div><img src="https://picsum.photos/200/100?f"></div>
</div>

body { padding:50px; }
.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;

  /* img { height:100%; width:100%;} */
}

Answer 1

You can apply a height: calc(210px * 1.6); where 210px is the width of the image when displayed (not its size on file). If the image widths are dynamic, then javascript will be needed to set that width size.

CSS Only:

img {
  width: 100%;
  height: calc(210px * 1.6);
}


.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<h1>all the images should be fill the width of the div. with aspect ratio of 1.6 and they need to be img tag.</h1>
<div class="grid">
  <div><img src="https://picsum.photos/200/300?a"></div>
  <div><img src="https://picsum.photos/200/300?b"></div>
  <div><img src="https://picsum.photos/100/300?c"></div>
  <div><img src="https://picsum.photos/200/200?d"></div>
  <div><img src="https://picsum.photos/200/300?e"></div>
  <div><img src="https://picsum.photos/200/100?f"></div>
</div>

If you would like the image to scale proportionately, use a background image instead and just size the div. Then set background-size: cover to fill all of the whitespace in the div.

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid > div {
  height: calc(210px * 1.6);
  width: 100%;
  
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

<h1>all the images should be fill the width of the div. with aspect ratio of 1.6 and they need to be img tag.</h1>
<div class="grid">
  <div style="background-image:url(https://picsum.photos/200/300?a)"></div>
  <div style="background-image:url(https://picsum.photos/200/300?b)"></div>
  <div style="background-image:url(https://picsum.photos/100/300?c)"></div>
  <div style="background-image:url(https://picsum.photos/200/200?d)"></div>
  <div style="background-image:url(https://picsum.photos/200/300?e)"></div>
  <div style="background-image:url(https://picsum.photos/200/100?f)"></div>
</div>

JavaScript:

[...document.querySelectorAll('img')].forEach(img => {
  img.style.height = img.width * 1.6 + 'px'
})

img {
  width: 100%;
}

<h1>all the images should be fill the width of the div. with aspect ratio of 1.6 and they need to be img tag.</h1>
<div class="grid">
  <div><img src="https://picsum.photos/200/300?a"></div>
  <div><img src="https://picsum.photos/200/300?b"></div>
  <div><img src="https://picsum.photos/100/300?c"></div>
  <div><img src="https://picsum.photos/200/200?d"></div>
  <div><img src="https://picsum.photos/200/300?e"></div>
  <div><img src="https://picsum.photos/200/100?f"></div>
</div>