css - 从宽度计算图像高度

Question

我有宽度未知的图像(父级的 100%，父级大小未知 - 响应)，不同大小的图像，我需要为所有这些图像设置相同的高度。

我准备了一个小的颂歌片段来向您展示我当前的代码。

#blog {margin: 0; padding: 0;}
#blog li {float: left; width: 48%; list-style: none;}
#blog li:nth-child(2n) {float: right;}
#blog li:nth-child(2n+1) {clear: both;}

#blog li img {display: block; width: 100%; height: calc(100% / 2.5);} /* 2.5 is width/height ratio */

<ul id=blog>
<li><img src=https://picsum.photos/500/300>...</li>
<li><img src=https://picsum.photos/700/250>...</li>
<li><img src=https://picsum.photos/200/100>...</li>
<li><img src=https://picsum.photos/100/80>...</li>
<li><img src=https://picsum.photos/600/540>...</li>
<li><img src=https://picsum.photos/300/300>...</li>
<li><img src=https://picsum.photos/300/300>...</li>
</ul>

是否可以在纯 CSS 中为所有图像设置确切的未知高度，或者我需要在 JS 中计算它？

注意:我无法调整这些图像的大小，在这种情况下(不正确的宽度/高度比)可以接受一点变形。

谢谢。

Answer 1

您可以尝试使用 flexbox，您可以在其中使用百分比值和高度，并且每一行的高度都相同，而不是所有行:

#blog {
  margin: 0;
  padding: 0;
  display:flex;
  flex-wrap:wrap;
}

#blog li {
  width: 48%;
  margin:0 1%;
  list-style:none;
}
img {
 width:100%;
 height:80%;
 /* object-fit: cover; in case you want to keep the ratio and cut a part of the image*/
}

<ul id=blog>
  <li><img src=https://picsum.photos/500/300>...</li>
  <li><img src=https://picsum.photos/700/250>...</li>
  <li><img src=https://picsum.photos/200/100>...</li>
  <li><img src=https://picsum.photos/100/80>...</li>
  <li><img src=https://picsum.photos/600/540>...</li>
  <li><img src=https://picsum.photos/300/300>...</li>
  <li><img src=https://picsum.photos/300/300>...</li>
</ul>