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

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>