Изображения
Выбирайте изображения в адаптивном поведении (чтобы они никогда не становились большими, чем их родительские элементы) и добавляйте к ним легкие стили - все через классы.
Содержание
Адаптивные изображения
Изображения в Bootstrap становятся адаптивными с .img-fluid
. max-width: 100%;
и height: auto;
, которые применяются к изображению так, чтобы оно масштабировалось с родительским элементом.
<img src="..." class="img-fluid" alt="Responsive image">
Изображения SVG и IE 9-10
В Internet Explorer 9-10 изображения SVG с .img-fluid
непропорционально велики. Чтобы исправить это, добавьте width: 100% \9;
где необходимо. Это исправление неправильно изменяет размер у других форматов изображений, поэтому Bootstrap не применяет его автоматически.
Уменьшенное изображение
В дополнение к нашим утилитам border-radius, вы можете использовать .img-thumbnail
чтобы придать изображению округленный внешний вид границы 1px.
<img src="..." alt="..." class="img-thumbnail">
Выравнивание изображений
Выровняйте изображения с помощью классов-помощников или классов выравнивания текста. block
-level изображения могут быть центрированы с использованием the .mx-auto
margin utility class.
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>