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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I added borders for demonstration purposes.

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Set their heights to the same value like so:

img {
  height: 120px;
}