如何调整具有不同高度的图像的高度[重复]答案

【问题标题】：How to adjust the height for images with different heights [duplicate]如何调整具有不同高度的图像的高度[重复]
【发布时间】：2022-01-17 20:39:22
【问题描述】：

我想按照以下计划放置我的照片：

ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul > li {
  width: 49%;
}

ul > li img {
  width: 100%;
  margin-block-end: 0.25rem;
}

<ul>
   <li>
     <img src="img/study-image-1.png" alt="">
   </li>
   <li>
     <img src="img/study-img-3.png" alt="">
   </li>
   <li>
     <img src="img/study-img-2.png" alt="">
   </li>
   <li>
     <img src="img/study-img-4.png" alt="">
   </li>
</ul>

但是当我根据以下代码进行设计时，是这样的。

提前感谢您的合作

【问题讨论】：

我看到的唯一可能的方法（没有 Javascript），如果你想保持纵横比是做两个不直接连接的垂直列。基本上把两个都填满了。你会遇到下一个问题，那就是它们的高度可能不同。这看起来很简单，但实际上是一个需要解决的相当高级的话题。
看看：codepen.io/rachelandrew/pen/QWEmPvK
你可以使用带有曼森效应的网格
你可以试试isotope.metafizzy.co
那么你知道你的两个小图像的纵横比是相同的，两个大图像也是如此吗？如果没有，那你想发生什么？

标签： javascript html css

【解决方案1】：

你想要这样的东西吗？你不需要 javascript

https://codepen.io/marcosefrem/pen/KKXELPy

<ul>
   <li>
     <img src="https://picsum.photos/500/400" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/50" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/200/200" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/400" alt="">
   </li>
  <li>
     <img src="https://picsum.photos/500/400" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/50" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/200/200" alt="">
   </li>
   <li>
     <img src="https://picsum.photos/100/400" alt="">
   </li> 
</ul>

<style>
 ul {
       column-count: 3;
      column-gap: 1.25rem;
    }
    li {
       break-inside: avoid-column;
      position: relative;
      display: inline-block;
      width: 100%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      flex-direction: column;
    }
li img {width:100%; object-fit:cover}


</style>

【讨论】：

【解决方案2】：

对于这个相当简单的布局，必须知道两个较大图像的纵横比与两个较小图像的纵横比相同，您可以使用 CSS 两列：

ul {
  columns: 2;
  width: 50vw;
  font-size: 4px;
}

li img {
  width: 100%;
  height: auto;
  margin: 2px 0 2px 0;
}

<ul>
  <li><img src="https://picsum.photos/id/1016/100/50"></li>
  <li><img src="https://picsum.photos/id/1015/200/300"></li>
  <li><img src="https://picsum.photos/id/1016/200/300"></li>
  <li><img src="https://picsum.photos/id/1015/100/50"></li>
</ul>

注意 - 垂直间距取决于字体大小，因此 4px 与 2x2px 的边距相匹配。显然，您需要调整它和整个东西的宽度以满足您的特定需求。

【讨论】：

【解决方案3】：

也可以使用divs 代替ul 和li：

.container {
  width: 300px;
  grid-template-rows: 100px 100px 100px;
  display: grid;
  grid-template-areas: 'one tow' 'tree tow' 'tree four';
  grid-gap: 10px;
}

img {
  width: 100%;
  height: 100%;
  margin-block-end: 0.25rem;
}

.item1 {
  grid-area: one;
}

.item2 {
  grid-area: tow;
}

.item3 {
  grid-area: tree;
}

.item4 {
  grid-area: four;
}

<div class="container">
  <div class="item1">
    <img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" alt="">
  </div>
  <div class="item2">
    <img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="">
  </div>
  <div class="item3">
    <img src="https://s4.uupload.ir/files/717195_346_g0du.jpg" alt="">
  </div>
  <div class="item4">
    <img src="https://s4.uupload.ir/files/0.270967001322580170_jazzaab_ir_ajvv.jpg" alt="">
  </div>
</div>

【讨论】：