Adaptive Photo Layout with Flexbox | CSS-Tricks

Let’s take a look at a super lightweight way to create a horizontal masonry effect for a set of arbitrarily-sized photos. Throw any set of photos at it, and they will line up edge-to-edge with no gaps anywhere. The solution is not only lightweight but also quite simple. We’ll be using an unordered list of images and just 17 lines of CSS, with the heavy lifters being flexbox and object-fit. Why? I

[bleu-bleut]

サイズがバラバラな写真をすき間なく敷き詰める、のをCSSだけでやれるらしい。