Bootstrap изображение
В этой главе мы узнаем Bootstrap поддержку картины. Bootstrap предоставляет три могут быть применены к изображению простого класса стиля:
- .img-закругленные:Добавитьграницы радиуса: 6px, чтобы получить филе изображения.
- .img-круг:добавитьграницы радиуса: 50%, чтобы вся картина становится круглой.
- .img-миниатюры:Добавьте отступы (кожухами) и серую рамку.
Рассмотрим следующие примеры показывают:
примеров
<Img SRC = "/wp-content/uploads/2014/06/download.png" класс = "IMG-округлый">
<Img SRC = "/wp-content/uploads/2014/06/download.png" класс = "IMG-круг">
<Img SRC = "/wp-content/uploads/2014/06/download.png" класс = "IMG-эскиз">
Попробуйте »
Результаты следующие:
<Img> Класс
Следующие классы доступны для любого изображения.
| категория | описание | примеров |
|---|---|---|
| .img-округлый | Добавление изображения филе (IE8 не поддерживает) | пробовать |
| .img-круг | Картина становится круговой (IE8 не поддерживает) | пробовать |
| .img-миниатюрами | Миниатюры | пробовать |
| .img-отзывчивым | Фотографии Адаптивный (будет хорошо масштабироваться до родительского элемента) | пробовать |
Отзывчивый изображение
По тегу <IMG>, чтобы добавить .img-отзывчивым класс поддержки изображения, чтобы сделать адаптивный дизайн. Снимки будут хорошо масштабироваться до родительского элемента.
.img реагирующих класс макс-ширина: 100%; и высота: авто, стиль применяется на изображении: