450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

Контент

Изображения

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

Содержание

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

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

100%x250
<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.

200x200
<img src="..." alt="..." class="img-thumbnail">

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

Выровняйте изображения с помощью классов-помощников или классов выравнивания текста. block-level изображения могут быть центрированы с использованием the .mx-auto margin utility class.

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