Я приветствую вас. По умолчанию изображения в Bootstrap не адаптивны. Я не знаю, почему разработчики фреймворка решили сделать так. Впрочем, сегодня я покажу вам, как легко сделать в Bootstrap адаптивные картинки (изображения).
Неадаптивное изображение — пример
Для начала давайте смотреть, как ведут себя изображения по умолчанию. Для этого я создам пустой блок в сетке бутстрапа, а также установлю ему некоторые стили, чтобы его было явно видно на странице.
<div class = "col-md-2"></div>
.col-md-2{
border: 5px solid red;
min-height: 200px;
}
Блок выглядит так:
То есть его границы четко видны. Давайте я попробую вставить в него изображение, которое больше блока:
Упс, изображение не адаптируется под размеры блока и вылезает за него. Если прописать блоку overflow: hidden, то изображение будет обрезано:
Как же сделать картинку адаптивной? Все очень просто, задайте ей класс img-responsive. Результат:
Теперь изображение адаптируется под размеры блока.
Но дело в том, что вам придется всем картинкам прописывать этот класс, а это не очень удобно. Поэтому я предлагаю поступить немного по-другому. Стилевой класс img-responsive добавляет изображениям такие свойства:
max-width: 100%;
height: auto;
display: block;
Именно они позволяют реализовать адаптивность. Так вот, просто пропишите их в своем собственном style.css (его, разумеется, нужно будет подключить к сайту) селектору img, то есть всем изображениям. Теперь вам не нужно прописывать никакой класс — адаптивность будет заложена по умолчанию.
Кстати, свойство display: block, никак не влияет на адаптивность, оно всего лишь делает картинки блочными (по умолчанию они строчные). Так что это свойство вы вполне можете и не писать, если не хотите, чтобы фото стали блоками.
Ну а у меня на этом все. Как видите, адаптировать изображения крайне просто, но внешний вид сайта от этого станет гораздо лучше.