.photos-line { column-count: 6; column-gap: 1em; } .photos-line .photo img { object-fit: cover; max-width: 100%; max-height: 100%; } 
 <div class="photos-line"> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22860491_293564051135946_1431999210961502208_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/23347493_138848026766173_4147715403113562112_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/23498171_1512204415482005_7319427710441226240_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22802639_866024183566278_671520314278019072_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22857687_133137560679761_5651001970152964096_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22710622_149419199004478_4851274197734785024_n.jpg"> </div> </div>

In this example, the pictures have different heights. The question is how to make it the same (minimal)?

    1 answer 1

    Example

     .photos-line { column-count: 6; column-gap: 1em; } .photos-line .photo { padding-bottom: 100%; position: relative; overflow: hidden; height: 0; } .photos-line .photo img { object-fit: cover; width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
     <div class="photos-line"> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22860491_293564051135946_1431999210961502208_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/23347493_138848026766173_4147715403113562112_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/23498171_1512204415482005_7319427710441226240_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22802639_866024183566278_671520314278019072_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/e35/22857687_133137560679761_5651001970152964096_n.jpg"> </div> <div class="photo"> <img src="https://scontent.cdninstagram.com/t51.2885-15/e35/p320x320/22710622_149419199004478_4851274197734785024_n.jpg"> </div> </div>

    • Thank you, it works almost perfectly, the only problem is that I cannot understand why the indents between the pictures of different widths. - Ilya Bizunov
    • @ Ilya Bizunov - it was necessary to use width - soledar10 instead on max-width
    • Hmm, really! Thank! - Ilya Bizunov