How to adjust the height for images with different heights

user_15034898 0
Viewed 86

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>

enter image description here

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

Thank you in advance for your cooperation

css html javascript
3 Answers

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

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.

user_108674540

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>

user_170071840
Related