如何在网格中制作图像标签的纵横比？

Question

我有六张图片，我想保持 1.6 的宽高比。

问题是我正在使用网格：一行中的 3 列（1fr 1fr 1fr）。可以通过媒体查询更改为 2 列（1fr 1fr）。

我尝试使用一些 css 属性，例如将图像高度和宽度设置为 100%，但是列发生了变化，图像也在增长。

如何用 CSS 网格解决这个问题并保持 1.6 的纵横比？ （而不是更改为背景只是图像标签）

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

您可以应用height: calc(210px * 1.6);，其中210px 是显示时图像的宽度（不是文件上的大小）。如果图像宽度是动态的，则需要 javascript 来设置宽度大小。

仅 CSS：

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>

如果您希望图像按比例缩放，请改用背景图像并调整 div 的大小。然后设置background-size: cover 填充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>