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 визначає, як слід змінювати розмір зображення, щоб воно відповідало контейнеру.

css
  • fill розтягує зображення, щоб заповнити контейнер, незалежно від його співвідношення сторін. Це може призвести до обрізання або спотворення зображення.

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

  • cover масштабує зображення так, щоб воно повністю покривало контейнер зі збереженням співвідношення сторін.

  • none відображає зображення у початковому розмірі, незалежно від розміру контейнера. Це може призвести до того, що зображення переповнить контейнер.

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

html

index.html

css

index.css

copy

object-position

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

css
html

index.html

css

index.css

copy
question mark

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

Select the correct answer

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

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

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

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

Запитати АІ

expand
ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

course content

Зміст курсу

Основи CSS

Основи CSS

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

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

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

object-fit

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

css
  • fill розтягує зображення, щоб заповнити контейнер, незалежно від його співвідношення сторін. Це може призвести до обрізання або спотворення зображення.

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

  • cover масштабує зображення так, щоб воно повністю покривало контейнер зі збереженням співвідношення сторін.

  • none відображає зображення у початковому розмірі, незалежно від розміру контейнера. Це може призвести до того, що зображення переповнить контейнер.

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

html

index.html

css

index.css

copy

object-position

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

css
html

index.html

css

index.css

copy
question mark

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

Select the correct answer

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

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

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

Секція 5. Розділ 3
Ми дуже хвилюємося, що щось пішло не так. Що трапилося?
some-alt