Часто виникає потреба виводити зображення в блок фіксованого розміру. В даному випадку з'являється проблема: як вписати картинку в блок без втрати пропорції.
Суть даного методу в тому, що картинка буде вписана в блок певних розмірів. Все, що не буде влазити в цей блок буде приховано. Обрамляє блок матиме ті ж самі властивості, що і картинка. Тому, його можна буде мати у своєму розпорядженні і вирівнювати так само, як і звичайну картинку. Варіант, звичайно, не ідеальний, але дієвий.
Для початку, підберемо пацієнтів. Я вбрал картинки трьох тварин з сімейства котячих різних пропорцій. Ширина у всіх картинок одна - 200 пікселів.
При такій різниці пропорцій картинок кращим варіантом буде взяти обрамляє блок розміром 200x120 пікселів.
Після всіх маніпуляцій з CSS виглядати це буде так:
![Портал szenprogs (szenprogs) портал szenprogs](https://images-on-off.com/images/118/portalszenprogs-e0ea087b.jpg)
![Портал szenprogs (szenprogs) портал szenprogs](https://images-on-off.com/images/118/portalszenprogs-d9acba22.jpg)
![Портал szenprogs (szenprogs) портал szenprogs](https://images-on-off.com/images/118/portalszenprogs-050722bf.jpg)
Код даного прикладу такий:
Як бачите, картинки не спотворили, а тільки обрізалися. Хоча насправді залишилися повнорозмірними. Цей метод буде дуже вдалим, якщо різниця пропорцій Ваших картинок невелика.
На цьому все. Підписуйтесь, ставте зірочки! Удачі в звершеннях!