Все о сайтостроении
→  →  →  

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. }

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

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

    710