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

Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Анатолий

    Спасибо!

  2. Маргарита

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

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