HTML

<ul class="thumbnails"> <li> <img src="https://via.placeholder.com/400x300/9932CC/FFFFFF"> </li> <li> <img src="https://via.placeholder.com/500x300/7FFFD4/000000"> </li> <li> <img src="https://via.placeholder.com/300x200/87CEFA/000000"> </li> <li> <img src="https://via.placeholder.com/300x400/F4A460/000000"> </li> </ul>

CSS

ul.thumbnails { display: flex; flex-wrap: wrap; } ul.thumbnails li { height: 150px; border: 4px solid #FFF; overflow: hidden; position: relative; width: 150px; } ul.thumbnails li img { position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; width: 250px; }

JavaScript