Ми знаємо, що зображення відіграють вирішальну роль на веб-сторінці. Вони допомагають показати вміст ефективно і чітко. Іноді розмір зображення може бути більшим або меншим за розмір контейнера, в якому воно має відображатися, або його співвідношення сторін може відрізнятися від співвідношення сторін контейнера. Ми розглянемо, як показати зображення найкращим чином.

object-fit

object-fit визначає, як слід змінювати розмір зображення, щоб воно відповідало контейнеру.

object-fit: fill | contain | cover | none | scale-down;

• fill розтягує зображення, щоб заповнити контейнер, незалежно від його співвідношення сторін. Це може призвести до обрізання або спотворення зображення.
• contain масштабує зображення до розміру контейнера зі збереженням співвідношення сторін. Це може призвести до появи порожнього простору навколо зображення, якщо контейнер і зображення мають різні співвідношення сторін.
• cover масштабує зображення так, щоб воно повністю покривало контейнер зі збереженням співвідношення сторін.
• none відображає зображення у початковому розмірі, незалежно від розміру контейнера. Це може призвести до того, що зображення переповнить контейнер.
• scale-down зменшує зображення до розміру контейнера, якщо він більший за природний розмір зображення, або відображає зображення у його природному розмірі, якщо воно вміщується у контейнер.

object-position

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

object-position: x y;