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

Bootstrap пропонує класи, які можна використовувати під час роботи з елементом <img>. Більшість із цих службових класів можуть застосовуватися до будь-якого елементу, а не лише до зображень. Тим не менш, є клас спеціально для адаптивних зображень.

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

Bootstrap пропонує клас .img-fluid, який дозволяє відповідним масштабувати зображення на різних пристроях. Цей клас застосовує до зображення max-width:100% та height:auto і це гарантує, що зображення масштабуватиметься до батьківського елемента .

Змініть розмір браузера, щоб побачити, як зображення масштабується при зменшенні області перегляду.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <img src="/example/image/22l.jpg" class="img-fluid" alt="Sample photo">

Скруглені куточки та мініатюри

Ви можете використовувати Bootstrap для відображення зображень із закругленими куточками або круглих зображень. Це робиться за допомогою службових класів .rounded-*.

Ви також можете використовувати клас .img-thumbnail, щоб додати зображенню заокруглену рамку в 1 піксель.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <img src="/example/image/8s.jpg" class="rounded" alt="Sample image"> <img src="/example/image/9s.jpg" class="rounded-circle" alt="Sample image"> <img src="/example/image/10s.jpg" class="img-thumbnail" alt="Sample image"> <img src="/example/image/11s.jpg" class="rounded-top" alt="Sample image">

Службові класи можуть застосовуватися до будь-якого елементу, а не лише до зображень. Класи заокруглення меж такі:

• rounded
• rounded-top
• rounded-right
• rounded-bottom
• rounded-left
• rounded-circle
• rounded-0

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

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

Обтікання

Використайте класи .float-left="class">.float-right, .float-*-left та .float-*-right щоб зробити обтікання зображення ліворуч або праворуч. Ці класи розміщують елемент ліворуч або праворуч або відключають обтікання залежно від поточного розміру області перегляду.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <img src="/example/image/9s.jpg" class="rounded-circle float-left" alt="Sample image"> <img src="/example/image/10s.jpg" class="rounded-circle float-right" alt="Sample image">

Адаптивні класи для вирівнювання зображень по лівому краю: .float-left, .float-sm-left, .float-md-left, .float-lg-left та .float-xl-left. Адаптивні класи для вирівнювання зображень з правого краю: .float-right, .float-sm-right, .float-md-right, .float-lg-right та .float-xl-right. Ви також можете використовувати .float-none та різні класи .float-*-none для вимкнення обтікання.

Центрування блокових зображень

Використовуйте .mx-auto одночасно з .d-block для центрування зображення. Це встановлює margin: auto.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <img src="/example/image/9m.jpg" class="img-circle mx-auto d-block" alt="Sample photo">

Ви також можете використовувати будь-який адаптивний клас .mx-*-auto.

Bootstrap 3 використовує .center-block для центрування блокових зображень. Bootstrap 4 для цього використовує .mx-auto та .mx-*-auto.

Центрування не блокових зображень

Ви можете використовувати класи .text-center та .text-*-center для батька зображення, щоб центрувати не блочне зображення.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="text-center"> <img src="/example/image/9m.jpg" class="img-circle" alt="Sample photo">
</div>

Класи такі: .text-center, .text-sm-center, .text-md-center, .text-lg-center та . text-xl-center. Ви також можете використовувати допоміжні класи .text-left, .text-right, .text-*-left та .text-*-right.