How can I get all my images to render with the same height in Flexbox?

Question

Hello,

I am a CSS novice and I am looking for some assistance.

I have been trying to display three images in a container using flexbox. All of the images render with slightly different properties. One image, in particular, renders with 92 pixels. The other two images are about 107 pixels. This causes misalignment on the H3 and P tag. The images I am using have all been downloaded from Unsplash.Com. I have not altered them.

I have been trying to find a solution, but I can't find anything that works. The only way I can get all the images to display as the same size was to add the height attribute in my CSS file, but that distorts the image that I am trying to display.

Any guidance you can provide to solve this issue will be greatly appreciated.

Thank you.

.container {

margin: 0 auto;

max-width: 1100px;

padding: 0 2em;

}

.split {

display: flex;

img {

max-width: 100%;

height: 50%;

border: 2px solid red;

}

.col {

margin: 0 1em;

}

.extra-space {

margin-top: 10rem;

}

HTML snippet.

<div class="container">

<h2>Going to Italy, an important step for humanity</h2>

<div class="split extra-space">

<div class="col">

<img src="img/nightlife.jpg" alt='Italy at night>

<h3>Night Life in Italy</h3>

<p>When you think Florence, you might not think nightclubs and hotspots for partying all night long but you would be surprised. This is one of the best cities to go if you want an incredible nightlife experience in Italy. </p>

</div>. !-- end col div -->

<div class="col">

<img src="img/vineyards.jpg

" alt="view of rolling vineyards">

<h3>Vineyards in Italy</h3>

<p>If you tasted a new Italian wine each week, it would take you 20 years to taste your way through Italy.</p>

</div>. !-- end col div -->

<div class="col">

<img src="img/cycling.jpg" alt='Cycling in the Alps' >

<h3>Cycling in the Alps</h3>

<p>Tackling the hills on the Alps. How much fun can that be? </p>

</div> <!-- end col div -->

</div> <!-- end split div-->

</div> <!-- end container div -->

Answer 1

Can try the following layout

1 container with x number of columns, each column has 2 inner containers in vertical layout. The h3 and p can be in the first inner container and the image with its original dimension can be in the second inner container. The image could be aligned within the second container however you want, top, left, center, bottom, right. To get all images the same height, you should consider using a fixed height value and leave width alone or set width to 100% for all of them. height/width using % is tricky because it is relative to the dimension of your parent container, whose dimension usually depends on its content unless you use a fixed value as its width/height.