Загрузка
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Всем привет!
На сегодняшнем уроке вы научитесь работать с изображением (картинкой) в bootstrap 3, а именно, делать изображение адаптивным, выравнивать по левому, правому краях или по центру, придавать картинке другую форму.
Начнем с адаптации.
Как сделать изображение (картинка) адаптивным
Чтобы сделать картинку адаптивной, добавьте к изображению (к тегу img) класс «img-responsive»:
<img src="kartinka.png" class="img-responsive">
К картинке будут применены такие CSS свойства для адаптивности, как «max-width:100%» и «height:auto».
Если вы хотите применить адаптивность ко всем картинкам без исключений, тогда нужно прописать общий CSS стиль для всех изображений. Я вам пока не рассказывал, как подключить свой CSS-файл, но в конце уроков я обязательно расскажу, как это сделать. А сейчас просто для общего ознакомления с тем, что такое возможно сделать, вот готовый код:
img { display: block; height: auto; max-width: 100%; }
Как изменить форму картинки
В Twitter Bootstrap 3 с помощью готовых CSS классов можно сделать изображение с:
закругленными углами – класс «img-rounded»
в рамке – «img-thumbnail»
форма круга «img-circle».
<img src="kartinka.png" alt="закругленные углами" class="img-rounded"> <img src="kartinka.png" alt="форма круга" class="img-circle"> <img src="kartinka.png" alt="в рамке" class="img-thumbnail">
Результат:
Расположение картинки
Картинку можно разместить по левую или правую стороны или по центру:
«pull-left» - слева
«pull-right» - справа
«center-block» по центру
Пример:
<img src="kartinka.png" class="pull-left" alt="слева"> <img src="kartinka.png" class="pull-right" alt="с права"> <img src="kartinka.png" class="center-block" alt="по центру">
Картинку по центру можно выровнять и вот таким способом:
<div class="text-center"> <img src="kartinka.png" class="img-rounded" alt="по центру"> </div>
Жду вас на следующих уроках по изучению Bootstrap 3.
В теле объявления вертикальные фото отображаются не пропорционально, может подскажите как исправить? Спасибо
Ответить
20 декабря, 2018 at 11:00
класс "img-responsive" не помог?
Ответить