Часто виникає потреба виводити зображення в блок фіксованого розміру. В даному випадку з'являється проблема: як вписати картинку в блок без втрати пропорції.
Суть даного методу в тому, що картинка буде вписана в блок певних розмірів. Все, що не буде влазити в цей блок буде приховано. Обрамляє блок матиме ті ж самі властивості, що і картинка. Тому, його можна буде мати у своєму розпорядженні і вирівнювати так само, як і звичайну картинку. Варіант, звичайно, не ідеальний, але дієвий.
Для початку, підберемо пацієнтів. Я вбрал картинки трьох тварин з сімейства котячих різних пропорцій. Ширина у всіх картинок одна - 200 пікселів.
При такій різниці пропорцій картинок кращим варіантом буде взяти обрамляє блок розміром 200x120 пікселів.
Після всіх маніпуляцій з CSS виглядати це буде так:
Код даного прикладу такий:
Як бачите, картинки не спотворили, а тільки обрізалися. Хоча насправді залишилися повнорозмірними. Цей метод буде дуже вдалим, якщо різниця пропорцій Ваших картинок невелика.
На цьому все. Підписуйтесь, ставте зірочки! Удачі в звершеннях!