Как сделать одинаковые размеры картинок в списках, галереях без создания миниатюр за счет css

Проблема многих вебмастеров при создании галерей, списков изображений или при выводе миниатюр картинок товара заключается в соблюдении одинаковых пропорций. Согласитесь приятно смотреть на миниатюры одинаковых пропорций, чем если бы они были вразнобой.

Обычно я решал данную проблему через overflow: hidden; и div, на который устанавливал ограничение по высоте картинок. Подробнее расскажу чуть позже. Сначала давайте поэтапно рассмотрим разные возможности по созданию миниатюр картинок одинакового размера от худшего к лучшему.

Итак, предположим у нас есть галерея в два ряда по три картинки в каждой. Все картинки по высоте и ширине разного размера, а нам нужно, чтобы миниатюрки были одинаковые. Сделаем это через css. Живую демонстрацию и скачать исходник вы можете внизу урока.

Вариант 1 (исходный)

<style>
.gallery1 { overflow: hidden; width: 480px;}
.gallery1 .ramka { float: left; margin-right: 10px; margin-bottom: 10px;}
.gallery1 img { width: 150px; }
</style>

<div class="gallery1">
<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>

Выглядело бы это все так:

Здесь каждая картинка обернута в div с классом ramka на который назначено свойство выравнивать картинки по левому краю. А в картинках .gallery1 img назначен размер по ширине 150px. Так как высота не указана, то она грузится исходной, чтобы не искажать пропорции картинок. Почему при таком способе все ряды съехали - именно из-за того, что высота картинок всегда разная. Этот способ не подходит.

Вариант 2 (с заданием принудительных пропорций картинок)

<style>
.gallery2 { overflow: hidden; width: 480px;}
.gallery2 .ramka { float: left; margin-right: 10px; margin-bottom: 10px;}
.gallery2 img { width: 150px; height: 150px; }
</style>

<div class="gallery2">
<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>

Чтобы ряды с картинками не разъезжались в этом примере мы задали принудительную высоту и ширину каждой картинке. В результате чего картинки стали с искаженными пропорциями.

Вариант 3 (с заданием нужных пропорций картинок и обрезкой по высоте)

<style>
.gallery3 { overflow: hidden; width: 480px; }
.gallery3 .ramka { float: left; margin-right: 10px; margin-bottom: 10px; width: 150px; height: 150px; overflow: hidden;}
.gallery3 img { width: 100% }
</style>

<div class="gallery3">
<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. Посмотрите на .gallery3 .ramka - здесь теперь overflow: hidden; который ограничивает размеры дива указанные в нем на 150x150px. В картинке задана ширина на 100%.

За счет этого метода все что выходит из дива больше, чем на 150px будет обрезаться. Не смотря на то, что скриншот галереи выглядит невзрачным, - это сделано специально, чтобы показать недостаток метода. Чтобы галерея была более приятной, нужно в диве ограничить высоту, например, на 100px, тогда все картинки без искажений будут в одном размере. Но минусом будет то, что картинки с очень большой высотой обрежутся снизу.

Вариант 4 (с заданием нужных пропорций картинок за счет object-fit: cover;)

<style>
.gallery5 { overflow: hidden; width: 480px;}
.gallery5 .ramka { float: left; margin-right: 10px; margin-bottom: 10px;}
.gallery5 img { width: 150px; height: 150px; object-fit: cover; }
</style>

<div class="gallery5">
<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>

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

ps

Размеры можно задавать и так (к диву, а картинка по 100%)
.gallery5 .ramka {float: left;margin-right: 10px;margin-bottom: 10px;width: 150px;height: 150px;
.gallery5 img {width: 100%; height: 100%; object-fit: cover;}

У свойства object-fit есть несколько параметров.

fill - масштабируется с сохранением пропорций, но с искажениями (как вариант 2).
contain - элемент масштабируется так, чтобы вместиться в элемент без искажений и обрезки
cover - картинка масштабируется (уменьшается или увеличивается) так, чтобы полностью вместиться в область без искажений (как вариант 4).

Надеюсь этот урок поможет вам легко создавать красивые миниатюры картинок одинакового размера, без предварительной обработки изображений.