This code shows you how to create a row of images where all images have the same height regardless of their width. Your HTML might look something like this:
<div class="row">
<div class="image"><img src="image-1.jpg" alt="" /></div>
<div class="image"><img src="image-2.jpg" alt="" /></div>
<div class="image"><img src="image-3.jpg" alt="" /></div>
</div>
Ordinarily, if the images were different heights they would display that way. But the following CSS will use Flexbox to ensure they’re all the same height. Note too the use of the gap
property to add spacing between images.
div.row {
display: flex;
gap: 25px;
div.image {
line-height: 0.5;
img {
width: 100%;
height: auto;
}
}
}
