Question

我有宽度未知的图像（父母的100％，父母的大小未知-响应），尺寸不同的图像，我需要为所有图像设置相同的高度。

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

<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>

service:
  name: sentry
  type: ClusterIP

是否可以在纯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>

从宽度计算图像高度

1 个答案: