Все о сайтостроении
  • Главная
  • →  
  • Разработка
  • →  
  • Фреймворки
  • →  
  • Bootstrap / как сделать изображение адаптивным
  • Bootstrap / как сделать изображение адаптивным

    Twitter Bootstrap - прекрасный инструмент (фреймворк), с помощью которого можно достаточно быстро сверстать адаптивный сайт. Адптивный сайт - это сайт который автоматически реагирует на размеры экрана, с которого его просматривает пользователь и подстраивается под данный экран. Для верстки используются определенные CSS классы, с помощью которых можно настраивать размер элементов, их положение, отношение к параметрам экрана и другое.

    Для изображений в Bootstrap предусмотрены специальные классы, с помощью которых можно настроить их адаптивность. Адаптивное изображение - это изображение, которое при изменении размера экрана подстраивается под него, пропорционально уменьшаясь, либо увеличиваясь. Чтобы сделать изображение адаптивным в Bootstrap верстке необходимо прописать ему нужный класс к тегу img.

    Для Twitter Bootstrap 3 - прописывается класс .img-responsive

    <img src="..." class="img-responsive">

     

    Для Twitter Bootstrap 4 - прописывается класс .img-fluid

    <img src="..." class="img-fluid">

     

    Подобным способом можно задать нужному изображению адаптивность, но если у вас много изображений, согласитель, будет не удобно каждому прописывать необходимый класс. Для того, чобы все изображения в контенте были адаптивными и не нужно было каждому задавать класс, необходимо это сделать через подключенный файл CSS стилей. Ниже представленны несколько вариантов реализации данного способа.

    1 Вариант - Все изображения будут адаптивными и являться строчно-блочными элементами (inline-block):

    1. img {
    2. display: inline-block;
    3. height: auto;
    4. max-width: 100%;
    5. }

     

    2 Вариант - Все изображения будут адаптивными и являться блочными элементами (block):

    1. img {
    2. display: block;
    3. height: auto;
    4. max-width: 100%;
    5. }

     

    3 Вариант - Все изображения, расположенные в id="main" будут адаптивными и являться блочными элементами (block):

    1. #main img {
    2. display: block;
    3. height: auto;
    4. max-width: 100%;
    5. }

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

      Похожие статьи

      280