Перейти к основному содержанию

Изображения

Документация и примеры для выбора изображений в адаптивном поведении (чтобы они никогда не становились больше, чем их родительские элементы) и добавления к ним облегченных стилей - все через классы.

Содержание

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

Изображения в Bootstrap сделаны адаптивными с помощью .img-fluid. Это относится max-width: 100%; и height: auto; к изображению, так что оно масштабируется вместе с родительским элементом.

PlaceholderResponsive image 
<img src="..." class="img-fluid" alt="...">

Эскизы изображений (thumbnails)

В дополнение к нашим утилитам border-radius вы можете использовать .img-thumbnail для придания изображению закругленной границы в 1 пиксель.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200 
<img src="..." class="img-thumbnail" alt="...">

Выравнивание изображений

Выровняйте изображения с помощью вспомогательных классов float или классов выравнивания текста. block изображения могут быть центрированы , используя в .mx-auto класс рентабельность полезности.

Placeholder200x200 Placeholder200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

picture

Если вы используете <picture> элемент, чтобы указать несколько <source> элементов для конкретного <img>, обязательно добавьте .img-* классы <img> в <picture> тег, а не в тег.

​<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>