Bootstrap - Изображение (image)

Bootstrap 3 Bootstrap 4

Статья в которой рассматриваются классы, которые предоставляет платформа Twitter Bootstrap 3 и 4, для работы с изображениями.

Адаптивное изображение - это изображение, которое подстраивается под ширину элемента, в котором оно расположено.

Т.е. оно отвечает следующим условиям:

  • если ширина изображения меньше ширины элемента, в котором оно расположено, то размеры этого изображения не изменяются.
  • если ширина изображения больше ширины элемента, в котором оно расположено, то ширина изображения приравнивается к доступной ширине родительского элемента. При этом высота данного изображения уменьшается пропорционально относительно его ширины.

Придание изображению адаптивности осуществляется:

  • в Twitter Bootstrap 3 посредством добавления класса .img-responsive к тегу img.
  • в Twitter Bootstrap 4 посредством добавления класса .img-fluid к тегу img.

Эти классы применяет к изображению CSS свойства max-width:100% и height:auto.

<!-- Bootstrap 3 -->  
<img src="..." class="img-responsive">

<!-- Bootstrap 4 -->  
<img src="..." class="img-fluid">

Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:

/* 1 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */
img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}
/* 2 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */
img {
  display: block;
  height: auto;
  max-width: 100%;
}
/* 3 Способ - Придать адаптивность всем изображениям, расположенных в элементе с id="main". При этом данные изображения будут себя ввести как блочные элементы (block) */
#main img {
  display: block;
  height: auto;
  max-width: 100%;
}

Данное правило необходимо добавить в CSS файл, который должен быть подключен после файла bootstrap.css.

В Twitter Bootstrap 3 и 4 можно с помощью соответствующих классов сделать изображение с закругленными углами (.img-rounded), заключить его в рамку (.img-thumbnail) или придать ему форму круга (.img-circle).

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Bootstrap 4 - Формы изображений

Изменить расположение изображения в Twitter Bootstrap можно с помощью вспомогательных классов float (.pull-left и .pull-right), класса .center-block и классов для выравнивания текста (.text-left, .text-center и .text-right).

Внимание:
Классы .pull-left, .pull-right и .center-block могут применяться для выравнивания изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы. После их применения изображения становится блочными.
Классы .text-left, .text-center и .text-right могут быть использованы только для изменения расположения изображений, которые ведут себя как строчно-блочные (inline-block) элементы.

Например, для того чтобы расположить изображение по левому краю к нему необходимо добавить класс .pull-left:

<img src="..." class="pull-left" alt="...">

Например, для того чтобы расположить изображение по правому краю к нему необходимо добавить класс .pull-right:

<img src="..." class="pull-right" alt="...">

Bootstrap 4 - Выравнивание изображения

Например, для того чтобы выровнять изображение по центру к нему необходимо добавить класс .center-block или поместить его в контейнер div с классом .text-center:

<!--1 Способ. Добавить к изображению класс .center-block-->
<!--Применяется для центрирования изображений, которые ведут себя как блочные (block) или строчно-блочные (inline-block) элементы-->
<!--После применения данного класса изображение становится блочным (display:block)-->
<img src="..." class="img-rounded center-block" alt="...">

Bootstrap 4 - Центрирование изображения

<!--2 Способ. Поместить изображение в элемент div, который имеет класс .text-center-->
<!--Применяется для центрирования изображений, которые ведут себя как строчно-блочные (inline-block) элементы-->
<div class="text-center">
  <img src="..." class="img-rounded" alt="...">
</div>

Bootstrap 4 - Изображения (демо)



   Bootstrap 0    52786 0

Комментарии (35)

  1. Егор # 0
    В первом примере раздела «Создание медиа-объектов с использованием Twitter Bootstrap» упущен один закрывающий тег. Полчаса искал почему разваливается ниже идущий за ним код :) Цикл уроков по Bootstrap — лучший, что я нашел в русскоязычном интернете. Спасибо автору!
    1. Александр Мальцев # 0
      Спасибо, Егор! Поправил.
    2. Сергей # +1
      Последнее утверждение устарело. Сейчас Bootstrap 3 поддерживает классы .pull-left / .pull-right, в том числе и для изображений. Хотя в свете ожидания Bootstrap 4 это, возможно, не актуально.
      1. Александр Мальцев # 0
        Спасибо, Сергей. Внёс исправление в статью.
      2. Дима # 0
        Отлично большое спасибо очень помогли класс )
        1. Максим Стацнко # 0
          Спасибо! Тоже поправил в carousel по центру и раундетом ее тоже)
          1. Артур # 0
            Огромное спасибо!
            Александр, у вас отличные уроки. Так разжевано всё!
            1. Сергей # 0
              Всем привет!
              Пригодился этот класс img-responsive, но столкнулся с проблемой, что выравнивание по горизонтали перестало работать. Все картинки уехали влево и никакими способами не встают по центру. Потыкав классы, понял, что это влияние из стиля bootstrap-а display:block.
              Или я что-то не так понимаю?
              1. Александр Мальцев # 0
                Привет.
                После применения класса img-responsive, изображение отображается уже как блок. А блочные элементы, необходимо выравнивать по другому. Всё это подробно описано в статье…
                Если изображения не хочешь делать блочными, то воспользуйся следующим CSS:
                img {
                  display: inline-block;
                  height: auto;
                  max-width: 100%;
                }
                
              2. Сергей # 0
                Большое спасибо!

                только я малость по другому сделал, так как мне не все картинки нужно центровать
                .img-responsive {
                  display: inline-block;
                }
                
                1. Андрей # 0
                  Привет.
                  С выводом изображения вроде разобрался. Но вот ни где не могу найти как сделать вывод текста или других элементов, например кнопок, логотипа и т.п. поверх изображения. Подскажите где копать?
                  1. Александр Мальцев # 0
                    Привет.
                    1. С помощью позиционирования. Изображение — relative, Блок — absolute.
                    CSS:
                    .image {
                      position: relative;
                    }
                    .over {
                      position: absolute;
                      left: 0;
                      top: 0;
                      width: 800px;
                      text-align: center;
                      z-index: 1000;
                    }
                    
                    HTML:
                    <div class="image">
                       <img src="img/image-800x600.jpg">
                       <div class="over">Некоторый текст, который необходимо вывести поверх изображения...</div>
                    </div>
                    
                    2. Как задний фон (background).
                    CSS:
                    .image {
                      background-image: url(img/image-800x600.jpg);
                      background-repeat: no-repeat;
                      background-position: center;
                      height: 600px;
                      width: 800px;
                      margin: 0 auto;
                      text-align: center;
                    }
                    
                    HTML:
                    <div class="image">
                      Некоторый текст, который необходимо вывести поверх изображения...
                    </div>
                    
                    1. Андрей # 0
                      Спасибо, попробую. Думал у Bootstrap это в CSS предусмотрено.
                      Кстати нашел еще одно решение в примере с созданием сайта визитки, там вроде без правки CSS.
                      1. Андрей # 0
                        Попробовал использовать первый вариант наложения текста, но изображение использую в колонке сетки , css параметр wight изменил на auto, но текст никак не могу установить по центру фото и соответственно колонки. Выравнивание текста только по левому краю. Подскажите как установить выравнивание текста по середине?
                        1. Александр Мальцев # 0
                          С выравниванием по центру не так всё просто, как это может показаться на первый взгляд.
                          Попробуй сделать так.
                          HTML:
                          <div class="image">
                             <img class="img-responsive center-block" src="img/image-800x600.jpg">
                             <div class="over">Некоторый текст, который необходимо вывести поверх изображения...</div>
                          </div>
                          
                          CSS:
                          .image {
                            position: relative;
                          }
                          .over {
                          position: absolute;
                            left: 50%;
                            top: 50%;
                            -webkit-transform: translate(-50%, -50%);
                            -moz-transform: translate(-50%, -50%);
                            -ms-transform: translate(-50%, -50%);
                            -o-transform: translate(-50%, -50%);
                            transform: translate(-50%, -50%);
                          }
                          
                          Другие варианты можешь посмотреть в статье:
                          CSS — Выравнивание по центру
                    2. Илья # 0
                      Столкнулся с такой проблемой: на BS4 .img-thumbnail max-width:100% на мобильном устройстве не работает, выставляю принудительно width:100% — работает.
                      1. Александр Мальцев # 0
                        Устанавливать width:100% не совсем правильно. Если картинка будет меньше ширины контейнера, то он её растянет.
                        Правильно, устанавливать именно max-width:100%.
                        Не знаю, но его поддерживают все браузеры, кроме Internet Explorer 6.
                        _http://caniuse.com/#feat=minmaxwh
                        1. Илья # 0
                          Странно, у меня во всех браузерах не работает (хром, мозила, яндекс). Хотя смотрю через консоль — max-width:100% к изображению применяется.
                          И на мобильном тоже не фурычит.
                          1. Антон # 0
                            Привет. Не подскажешь решение проблемы?
                            Есть карусель на Бутстрапе. вверху есть меню, которое поверх фона, контролеры карусели не работают если с помощью z-index ставишь выше меню, а если ставить выше контролеры, то не работают кнопки меню, и сами становятся темнее
                            1. Александр Мальцев # 0
                              Данную ситуацию желательно смоделировать на jsfiddle.net. А так попробуйте поэкспериментировать с z-index… Карусель и меню как-то накладываются друг на друга?
                        2. Elena # 0
                          Добрый день. Не подскажите, как быть с видео. Есть ли в bootstrap-3 класс отвечающий за адаптивность видео? Подскажите, где посмотреть можно пример. Спасибо
                          1. Александр Мальцев # 0
                            Здравствуйте, есть.
                            Поддерживаются следующие теги: iframe, embed, video и object.
                            <!-- Соотношение 16:9 -->
                            <div class="embed-responsive embed-responsive-16by9">
                              <iframe class="embed-responsive-item" src="..."></iframe>
                            </div>
                            <!-- Соотношение 4:3 -->
                            <div class="embed-responsive embed-responsive-4by3">
                              <iframe class="embed-responsive-item" src="..."></iframe>
                            </div>
                            
                            1. Elena # 0
                              Спасибо большое. Очень помогли. я всегда на вашем сайте находила много полезной и понятно изложенной информации. Очень помогает новичкам. спасибо за Ваш труд.
                              1. Александр Мальцев # 0
                                Очень приятно читать такие отзывы.
                          2. Александр # 0
                            Вот у меня такой вопрос, при нормальном отображении стоит pull-right.
                            А как сделать так чтоб на маленьких устройствах было по центру.
                            Вот к примеру код
                            <div class="col-sm-6">
                            	<div class="social-icons pull-right">
                            	<ul class="nav navbar-nav">
                            	<li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            	<li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            	<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                            	<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            	</ul>
                            	</div>
                            	</div>
                            1. Александр # 0
                              А все разобрался, пришлось добавить меда запросы дополнительно
                              1. Сергей # 0
                                Здравствуйте
                                Для разных размеров сетки Bootstrap xs, sm, md, lg надо генерировать превьюшку изображения с разными размерами по ширине. Потому что в моем случае для, например lg достачно 250px, а вот для xs надо уже 800px. Можно конечно згенерировать превью шириной 800px, которое подойдет для разных размеров экрана, но с превью такого размера, это большой траффик и медленная скорость загрузки картинок. Вот как тут поступить если для разных классов xs, sm, md, lg нужно генерить оптимизированную превьюшку изображения?
                                1. Александр Мальцев # 0
                                  Здравствуйте.
                                  Используйте элемент picture, он поддерживается браузерами Chrome 38+, Firefox 38+, Edge 13+ (IE), Opera 25+, Safari 9.1. Он позволяет с помощью медиа-запроса настроить файл изображения.
                                  <picture>
                                    <source media="(min-width: 992px)" srcset="high-res-image.jpg">
                                    <source media="(min-width: 768px)" srcset="mid-res-image.jpg">
                                    <img src="low-res-image.jpg">
                                  </picture>
                                  
                                  Вышеприведённый пример будет работать следующим образом:
                                  — ширина экрана больше 992px — файл high-res-image.jpg
                                  — ширина экрана больше 768px и меньше 992px — файл mid-res-image.jpg
                                  — ширина экрана меньше 768px — файл low-res-image.jpg.

                                  Так же можно использовать медиа-запросы для показа изображения через свойство CSS background.

                                  Можно также организовать это через JavaScript. Т.е. написать скрипт, который будет получать разрешение экрана и плотность пикселей, обрабатывать эти сведения и зависимости от результата изменять имя изображения у элемента img.
                                  1. Сергей # 0
                                    Спасибо, за совет. То что нужно.
                                    Сайт сделан на MODx и стояла задача снизить трафик при загрузке картинок от сервера к клиенту. Думаю так и сделаю, настрою MODx на генерацию необходимых размеров превьюшек, а показывать буду уже в зависимости от размера екрана.
                                2. seventh # 0
                                  Подскажите, пожалуйста, а как растянуть (и уменьшить) картинку по вертикали? Так чтобы она влезала в высоту окна браузера и не создавала полосу прокрутки.
                                  У меня маленькая страница, у которой ~80% высоты должно занимать изображение. Оно заведомо загружено большего размера и поэтому отображается в полный рост. Чтобы увидеть нижнюю часть приходится прокручивать. А в ширину оно вообще не ограничено — в ширь можно растягиваться сколько угодно (не достанет до краёв).
                                  1. Александр Мальцев # 0
                                    Можно сделать так:
                                    <!DOCTYPE html>
                                    <html lang="ru">
                                      <head>
                                        <meta charset="utf-8">
                                        <title>...</title>
                                        <style>
                                          html, body {
                                            height: 100%;
                                          }
                                        </style>
                                      </head>
                                      <body>
                                        <div style="height: 20%;"></div>
                                        <div style="height: 80%; text-align: center;">
                                          <img src="image.jpg" style="height: 100%; width: auto;">
                                        </div>
                                      </body>
                                    </html>
                                    
                                    Т.е. добавить к изображению стили с помощью CSS или атрибута style:
                                    height: 100%;
                                    width: auto;
                                    
                                    1. Антон # 0
                                      В тему вопрос: Как сделать чтобы карусель была в окне браузера? Если использовать heightL100%, то индикаторы все-равно не лезут.
                                      1. Александр Мальцев # 0
                                        Если правильно понял, то необходимо сделать так:
                                        <body>
                                          <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="height: 100%; overflow: hidden;">
                                          ...
                                        
                                  2. Георгий # 0
                                    Александр, здравствуйте! Изображение вылезает из формы вправо. Что изменить?
                                    <div class="col-md-3 col-lg-3 feed-back-form form-bg text-center">
                                      <b>Чтобы заказать просто заполните форму</b>
                                      <form action="">
                                        <div class="form-group">
                                          <input class="form-control" type="text" name="name">
                                        </div>
                                        <div class="form-group">
                                          <input class="form-control" type="email" name="email">
                                        </div>
                                        <div class="form-group">
                                          <input class="form-control" type="text" name="phone">
                                        </div>
                                        <div class="form-group">
                                          <img src="img/sale.png" class="img-responsive">
                                        </div>
                                        <button class="btn btn-default btn-lg">Записаться</button>
                                        <p>Количество мест ограничено</p>
                                      </form>
                                    </div>
                                    
                                    itchief.ru/assets/uploadify/b/d/3/bd3490d71ce43f95b737a073a01e3ccd.jpg
                                    1. Александр Мальцев # 0
                                      Cмотреть надо не на код HTML, а на стили CSS.
                                      Приведите вашу форму на jsfiddle.net.

                                    Вы должны авторизоваться, чтобы оставлять комментарии.