<mosaic-fit> Web Component

<mosaic-fit> is a standard HTML component that lays out images in a mosaic.

It has no dependencies.
No image ever stick alone on an extra line.
It doesn't jump around when you resize the window.
It doesn't crop images.

Source code

It's simple to use:

1. Download mosaic-fit.js

2. Add it to your markup

<script type="module" src="mosaic-fit.js"></script>

3. Wrap <mosaic-fit> around a bunch of images:

<mosaic-fit>
    <img src="img/0.jpg" />
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/7.jpg" />
    <img src="img/8.jpg" />
    <img src="img/9.jpg" />
</mosaic-fit>

Somewhat customizable

It supports some custom parameters: margin-vertical, margin-horizontal, gap, max-height

<mosaic-fit
        margin-vertical="36"
        margin-horizontal="36"
        gap="2"
        max-height="300">
    <img src="img/0.jpg" />
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    <img src="img/4.jpg" />
    <img src="img/7.jpg" />
    <img src="img/8.jpg" />
    <img src="img/9.jpg" />
</mosaic-fit>

It's open source

MIT code at https://gitlab.com/lobau/mosaic-fit.

All photos on this page are public domain.