Зображення, WebReference

Для оформлення зображень є кілька класів - img-rounded, img-circle та img-thumbnail. Щоб змінити стиль відображення картинок просто додайте один із цих класів до елемента. На рис. 1 показано результати застосування кожного класу.

а. Оригінальне зображення

Мал. 1. Зміна стилю зображення

Клас img-rounded заокруглює куточки біля картинки, img-circle робить її круглою, а img-thumbnail додає рамку навколо зображення.

У прикладі 1 показано, як вивести фотографію та задати її стиль.

Приклад 1. Кругла картинка

Будь-які зображення, що виводяться, мають вихідні розміри, але для адаптивного дизайну краще, коли ширина картинки підлаштовується під ширину колонки. Для цього до елемента достатньо додати img-responsive клас , як показано в прикладі вище. Зауважте, що класи для адаптивного розміру та стилю зображення цілком поєднуються між собою. В результаті при зменшенні розміру вікна ми побачимо зменшення самої картинки (рис. 2).

Мал. 2. Вигляд фотографії при зменшенні розмірів вікна

---