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

object-fit

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

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

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

object-position

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

object-position: x y;