Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Робота з Зображеннями | Декоративні Ефекти
Основи CSS
course content

Зміст курсу

Основи CSS

Основи CSS

2. CSS для Тексту
3. Бокс Модель та Відстань між Елементами
4. Флексбокс
5. Декоративні Ефекти

bookРобота з Зображеннями

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

object-fit

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

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

index

css

index

js

index

copy

object-position

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

html

index

css

index

js

index

copy
Що робить властивість object-fit?

Що робить властивість object-fit?

Виберіть правильну відповідь

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 5. Розділ 3
some-alt