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

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

Комментариев: 1
  1. Маргарита

    Спасибо автору! Купила тему на Bootsstrap, в характеристиках указано, что все ok, на деле все доделывать, как раз с изо проблемки. Вы объяснили доходчиво и понятно. Процветания и удачи вашему блогу! :idea:

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: