How can I put 2 different sized pictures side by side, so there height will be the same in HTML?

Question

This is the css I have:

<style>
        .column {
            padding: 5px;
        }
        .row {
            display: flex;
            justify-content: center;
        }
</style>

And this is the HTML code:

<div class="row">
    <div class="column">
        <img src="image1.jpg" alt="climbing a mountain" style="width: 100%;" />
    </div>
    <div class="column">
        <img src="image2.jpg" alt="climbing a metal tree" style="width: 100%;" />
    </div>
</div>

.column {
  padding: 5px;
}
.row {
  display: flex;
  justify-content: center;
}

<div class="row">
    <div class="column">
        <img src="https://picsum.photos/200/300" alt="climbing a mountain" style="width: 100%;" />
    </div>
    <div class="column">
        <img src="https://picsum.photos/200/300" alt="climbing a metal tree" style="width: 100%;" />
    </div>
</div>

I have tried messing with the width and height options and it didn't work, but maybe I am missing something

@Paulie_D but that can come in handy when using a `width` on class `.column` — Rana, Oct 24 '21 at 11:21
Either you want the heights the same or you want the widths...you can't have both at the same time. — Paulie_D, Oct 24 '21 at 11:22
https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings — Paulie_D, Oct 24 '21 at 11:24

score 0 · Answer 1 · answered Oct 24 '21 at 11:24

Using flex and align-items: stretch; on .row along with height: 100% on the img works well for this:

<style>
  .column {
    padding: 5px;
    border: 1px solid blue;
  }
  
  .column img {
    height: 100%;
  }
  
  .row {
    display: flex;
    justify-content: center;
    align-items: stretch;
    border: 1px solid red;
  }
</style>

<div class="row">
  <div class="column">
    <img src="https://picsum.photos/200" alt="climbing a mountain" style="width: 100%;" />
  </div>
  <div class="column">
    <img src="https://picsum.photos/300" alt="climbing a metal tree" style="width: 100%;" />
  </div>
</div>

I added borders for demonstration purposes.

score 0 · Answer 2 · answered Oct 24 '21 at 11:29

You can do that by having width: 100%;height: 100% then defining some height(values must be absolute or in vh) values to img parent class

.column {
  padding: 5px;
  width: 40%;
  height: 250px;
}

.row {
  display: flex;
  justify-content: center;
}

<div class="row">
  <div class="column">
    <img src="https://imgsv.imaging.nikon.com/lineup/coolpix/p/p7000/img/sample/img_02_b.jpg" alt="climbing a mountain" style="width: 100%;height:100%" />
  </div>
  <div class="column">
    <img src="https://pixy.org/src/477/4774988.jpg" alt="climbing a metal tree" style="width: 100%;height:100%" />
  </div>
</div>

How can I put 2 different sized pictures side by side, so there height will be the same in HTML?

2 Answers2