Проблема многих вебмастеров при создании галерей, списков изображений или при выводе миниатюр картинок товара заключается в соблюдении одинаковых пропорций. Согласитесь приятно смотреть на миниатюры одинаковых пропорций, чем если бы они были вразнобой.
Обычно я решал данную проблему через 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).
Надеюсь этот урок поможет вам легко создавать красивые миниатюры картинок одинакового размера, без предварительной обработки изображений.
Добавить комментарий