HTML Two pictures side by side positioned, filling out the full width of the explorer window-CodePudding

I am looking for a solution to get two pictures side by side positioned, filling out the full width of the explorer window. The two photos have different formats (portrait and landscape). The two photos in the same row should then both have the same height. For example as in the example photo, but it must not be distorted as shown here. Is there a way to get it like this?

CodePudding user response：

the pictures are displayed like this:

<a><img src="leftpicture.jpg" alt="">
</a>
<a><img src="rightpicture.jpg" alt="">
</a>

CodePudding user response：

The HTML: 
   `<div >
        <div >
          <img src="image.png" style="width:100%">
        </div>
        <div >
          <img src="image.png" style="width:100%">
        </div>
    </div>`

The css:
`<style>
.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}
</style>

CodePudding user response：

Now they have the same width, but not the same height. Why??? This is the code I use:

html:

    <div >
        <div >
            <a href="Ananasfrucht (1g).JPG" data-lightbox="1-Ananas" data-title="nach ca. 3 Jahren ist der Fruchtansatz erkennbar (nach 1 Woche)">
                <img src="Ananasfrucht (1g).JPG" alt="Ananasfrucht" style="width: 100%">                    
            </a>
        </div>
        <div >
            <a href="Ananasfrucht (2g).JPG" data-lightbox="1-Ananas" data-title="nach ca. 3 Jahren ist der Fruchtansatz erkennbar (nach 1 Woche)">
                <img src="Ananasfrucht (2g).JPG" alt="Ananasfrucht" style="width: 100%">
            </a>
        </div>
    </div>

css:

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}

CodePudding user response：

There are two ways I can think of to do this.

The first is to create a <div>, and place two <img> tags in it, then customize the sizing of the images accordingly. See this CodePen. (I picked up random photos I found on Google.)

The second way would be to create two divs [under the parent container] and set the desired images as background images for them. See this other CodePen.

I would personally prefer to use image tags so that I can resize the image quickly and as needed. It's a little more stressful to have to adjust the size and avoid repeating of the background image of the div in my opinion, but of course it all depends on what you are trying to achieve on your site.