Як зробити однакові розміри у каналах, галереях без створення мініатюр за рахунок css

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

Зазвичай я вирішував цю проблему через overflow: hidden; і div, на який встановлював обмеження по висоті картинок. Детальніше розповім трохи пізніше. Спочатку давайте поетапно розглянемо різні можливості по створенню мініатюр картинок однакового розміру від гіршого до кращого.

Отже, припустимо у нас є галерея в два ряди по три картинки в кожній. Всі картинки по висоті і ширині різного розміру, а нам потрібно, щоб мініатюрки були однакові. Зробимо це через css. Живу демонстрацію і завантажити исходник ви можете внизу уроку.

Виглядало б це все так:

Тут кожна картинка обгорнута в div з класом ramka на який призначено властивість вирівнювати картинки по лівому краю. А в картинках .gallery1 img призначений розмір по ширині 150px. Так як висота не вказана, то вона вантажиться вихідної, щоб не спотворювати пропорції картинок. Чому при такому способі все ряди з'їхали - саме через те, що висота картинок завжди різна. Цей спосіб не підходить.

Варіант 2 (із завданням примусових пропорцій картинок)

Щоб ряди з картинки не роз'їжджалися в цьому прикладі ми задали примусову висоту і ширину кожної картинки. В результаті чого картинки стали з перекрученими пропорціями.

Варіант 3 (із завданням потрібних пропорцій картинок і обрізанням по висоті)

Це один з кращих способів приведення картинок під один формат. Я його використовував до сьогоднішнього дня, поки не дізнався про властивості object-fit. Подивіться на .gallery3 .ramka - тут тепер overflow: hidden; який обмежує розміри діва зазначені в ньому на 150x150px. У зображенні задана ширина на 100%.

За рахунок цього методу все що виходить з діва більше, ніж на 150px буде обрізатися. Не дивлячись на те, що скріншот галереї виглядає непоказним, - це зроблено спеціально, щоб показати недолік методу. Щоб галерея була більш приємною, потрібно в діві обмежити висоту, наприклад, на 100px, тоді все картинки без спотворень будуть в одному розмірі. Але мінусом є те, що картинки з дуже великою висотою обріжуть знизу.

Варіант 4 (із завданням потрібних пропорцій картинок за рахунок object-fit: cover;)

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

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

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

Сподіваюся цей урок допоможе вам легко створювати красиві мініатюри картинок однакового розміру, без попередньої обробки зображень.

Читайте також

• Ефекти при наведенні на картинку в CSS3. Галерея картинок зі збільшенням CSS3
• Як поміняти порядок div блоків в мобільній версії за рахунок css
• Ефект віддзеркалення в CSS3 на картинку (-webkit-box-reflect).
• Всі ефекти css3 при наведенні на картинку

Дозволить швидко створити будь-яку форму зворотного зв'язку для вашого сайту з чекбоксами, полями, радіокнопку, файлами і безліччю налаштувань!