Бешеный конкурс!
12:57
Автор: Рубрика: Bootstrap Комментариев нет

Как сделать в Bootstrap адаптивные картинки?

Я приветствую вас. По умолчанию изображения в 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, никак не влияет на адаптивность, оно всего лишь делает картинки блочными (по умолчанию они строчные). Так что это свойство вы вполне можете и не писать, если не хотите, чтобы фото стали блоками.

Ну а у меня на этом все. Как видите, адаптировать изображения крайне просто, но внешний вид сайта от этого станет гораздо лучше.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Комментариев нет