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

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;