Изображения в Bootstrap

«Отзывчивые» изображения

Чтобы изображения подстраивались под ширину экрана и не вылезали за его пределы, создавая горизонтальную полосу прокрутки, в Bootstrap предусмотрен класс img-responsive. Используется он очень просто:

<img src="..." class="img-responsive" alt="Отзывчивое изображение">

Этот класс добавляет следующие стили: max-width: 100%;, height: auto; и display: block;. В результате изображения масштабируются под размер родительского контейнера.

Пример:

Может возникнуть вопрос, как центрировать такие изображения. Забегая вперед, скажу, что для этого используется класс .center-block вместо .text-center, который мы рассматривали ранее.

Фигуры изображений

Изображениям можно задать разную форму. Для этого в Bootstrap предусмотрены специальные классы img-thumbnail, img-rounded, img-circle:

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Пример:

Фото в каталоге и на странице товара

Чтобы задать класс для фото на странице товара, найдите переменные, которые отвечают за его отображение. Обычно это $PHOTO$ и $THUMB$. Тогда, оно может быть использовано следующим образом:

<img id="ipreview" src="$PHOTO$" class="gphoto img-responsive img-thumbnail" onclick="_bldCont1($ID$, this.getAttribute('idx'));" idx="0">

Аналогичным образом происходит добавление классов в шаблоне "Вид товара в каталоге":

<img src="$THUMB$" class="gphoto img-responsive img-thumbnail" id="$BLOCK_PREF$-gphoto-$ID$">

Фото в таблице заказа

В таблице с товарами на странице заказа мы не можем прописать класс для изображения. Поэтому необходимо задать стили в CSS магазина. Можно использовать следующий код:

/* .img-circle */
#order-table .order-item-img img {
 border-radius: 50%;
}
/* .img-rounded */
#order-table .order-item-img img {
 border-radius: 6px;
}
/* .img-thumbnail */
#order-table .order-item-img img {
 display: inline-block;
 max-width: 100%;
 height: auto;
 padding: 4px;
 line-height: 1.42857143;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 4px;
 -webkit-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
/* .img-responsive */
#order-table .order-item-img img {
 display: block;
 max-width: 100%;
 height: auto;
}

Используйте один из трех способов настройки внешнего вида изображения совместно с img-responsive.