Search the blog

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;

        }

    }

}					
Tim Bennett is a Leeds-based web designer from Yorkshire. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.