How to adjust the height for images with different heights

Question

I want to put my photos according to the following plan:

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>

But when I did my design based on the following code, it was like this.

Thank you in advance for your cooperation

The only way possible (without Javascript) that I see, if you want to keep the aspect ratio is doing two vertical columns that aren't directly connected. Basically filling both of them up. You'll get into the next problem, that will be, that they might not be the same height. This seems very simple, but is actually a rather advanced topic to solve. — Frizzant, Jan 17 '22 at 20:43
So do you know that the aspect ratios of your two smaller images are the same and ditto for the two larger images? If not then what do you want to happen? — A Haworth, Jan 17 '22 at 21:15
If you know that the aspect ratios match then it's relatively straightforward using 2 CSS columns, but if you have random aspect ratios in your images then you might want to look at using grid instead with the images fitting using cover. — A Haworth, Jan 17 '22 at 21:34

score 1 · Answer 1 · answered Jan 17 '22 at 21:21

Do you want something like this?, you don´t need 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>

score 1 · Answer 2 · answered Jan 17 '22 at 21:33

For this fairly straightforward layout where it must be known that the aspect ratios of the two bigger images are the same as are the aspect ratios of the two smaller images you could use CSS two columns:

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>

Note - the vertical gap depends on font-size, hence the 4px to match the 2x2px of the margins. Obviously you will want to adjust this and the width of the whole thing to suit your particular needs.

Arman Ebrahimi · Answer 3 · 2022-01-17T21:48:06.540

Also can use from divs instead ul and 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>

How to adjust the height for images with different heights

3 Answers3