Зміст курсу
Основи CSS
Основи CSS
Робота з Зображеннями
Ми знаємо, що зображення відіграють вирішальну роль на веб-сторінці. Вони допомагають показати вміст ефективно і чітко. Іноді розмір зображення може бути більшим або меншим за розмір контейнера, в якому воно має відображатися, або його співвідношення сторін може відрізнятися від співвідношення сторін контейнера. Ми розглянемо, як показати зображення найкращим чином.
object-fit
object-fit
визначає, як слід змінювати розмір зображення, щоб воно відповідало контейнеру.
fill
розтягує зображення, щоб заповнити контейнер, незалежно від його співвідношення сторін. Це може призвести до обрізання або спотворення зображення.contain
масштабує зображення до розміру контейнера зі збереженням співвідношення сторін. Це може призвести до появи порожнього простору навколо зображення, якщо контейнер і зображення мають різні співвідношення сторін.cover
масштабує зображення так, щоб воно повністю покривало контейнер зі збереженням співвідношення сторін.none
відображає зображення у початковому розмірі, незалежно від розміру контейнера. Це може призвести до того, що зображення переповнить контейнер.scale-down
зменшує зображення до розміру контейнера, якщо він більший за природний розмір зображення, або відображає зображення у його природному розмірі, якщо воно вміщується у контейнер.
index
index
index
object-position
object-position
задає позицію зображення всередині контейнера. Він приймає два значення: горизонтальне і вертикальне, або ми можемо використовувати зарезервовані слова.
index
index
index
Дякуємо за ваш відгук!