Зображення в Bootstrap 4

Закруглені кути

Клас .rounded додає закруглені кути до зображення:

See the Pen
Заокруглені кути в зображенні
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Коло

Клас .rounded-circle формує зображення у вигляді кола:

See the Pen
Зображення у вигляді кола
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Мініатюра

Клас .img-thumbnail формує зображення у вигляді мініатюри:

See the Pen
Мініатюра
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Вирівнювання зображень

Вирівнюйте зображення bootstrap 4 праворуч з класом .float-right або ліворуч із .float-left:

See the Pen
Вирівнювання зображень
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Вирівнювання по центру

Центруйте зображення, додавши до класи .mx-auto(margin: auto) і .d-block(display: block):

See the Pen
Центрування зображення
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Адаптивні зображення bootstrap 4

Адаптивні зображення автоматично регулюються відповідно до розміру екрана.

Створюйте адаптивні зображення, додаючи клас .img-fluid до тегу <img>. Після цього зображення буде добре масштабуватися відповідно до батьківського елемента.

Клас  .img-fluid вставновлює max-width: 100%; і height: auto;до зображення:

See the Pen
Адаптивні зображення
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

На цьому все. Дякую за увагу! Якщо не читали минулий урок, то маєте можливість зробити це саме зараз.

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/bootstrap4/bootstrap_images.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: