Приклад ідеально демонструє, як створювати в html галерею з однаковими мініатюрами, тут вказані потрібні розміри мініатюр і властивість object-fit: cover; яка робить "обрізку" фоток на льоту. Картинки "обрізатимуться" по центру без спотворень.

Копіювати
<style>
	.gallery {overflow: hidden; width: 480px;}
	.gallery .ramka {float: left; margin-right: 10px; margin-bottom: 10px;}
	.gallery img {width: 150px; height: 150px; object-fit: cover; }
</style>

<div class="gallery">
	<div class="ramka"><img src="images/001_t.jpg" /></div>
	<div class="ramka"><img src="images/002_t.jpg" /></div>
	<div class="ramka"><img src="images/003_t.jpg" /></div>
	<div class="ramka"><img src="images/004_t.jpg" /></div>
	<div class="ramka"><img src="images/005_t.jpg" /></div>
	<div class="ramka"><img src="images/006_t.jpg" /></div>
</div>

У властивості object-fit є кілька параметрів.

• fill - масштабується зі збереженням пропорцій, однак зі спотвореннями
• contain - елемент масштабується так, щоб вміститися в елемент без викривлень і обрізки
• cover - картинка масштабується (зменшується або збільшується) так, щоб повністю вміститися в область без спотворень

Ще один варіант стилізації, коли розміри можна задавати в інший спосіб (до div, а розмір по 100%):

Копіювати
<style>
	.gallery .ramka {float: left;margin-right: 10px;margin-bottom: 10px;width: 150px;height: 150px;
	.gallery img {width: 100%; height: 100%; object-fit: cover;}
</style>

Приклад роботи з малюнками різих розмірів:

Приклад роботи zoomhub.net з малюнками різих розмірів: