Настройка масштабирования изображений в Bootstrap 3: решение

Быстрый ответ

Для обеспечения адаптивного масштабирования изображения в Bootstrap 3 добавьте класс .img-responsive и дополните его следующими стилями:

.img-responsive {
    width: 100%;   /* Ключ к масштабированию */
    height: auto;  /* Поддержка пропорций */
}

Затем присвойте этот класс нужному изображению:

<img src="image.jpg" class="img-responsive" alt="...">

Таким образом, изображение будет адекватно заполнять родительский контейнер, сохраняя свои пропорции на различных устройствах.

Продвинутые настройки для улучшения масштабирования изображения

.img-responsive хорошо работает "из коробки", но полезно знать о вариантах его улучшения:

Перфектное масштабирование на больших устройствах

Добавьте min-height в медиа-запросы для корректного отображения на больших экранах:

@media (min-width: 1200px) {
    .img-responsive {
        min-height: 300px; /* Подстраивайте значение под свои нужды */
    }
}

Подробнее об этом расскажет наш спикер на видео

Сохранение пропорций на профессиональном уровне

Использование фиксированной высоты поможет поддержать соотношение сторон вашего адаптивного изображения:

.img-responsive {
    height: 200px; /* Подберите значение индивидуально */
}

Стратегия контейнера для совершенствования масштабирования

Оберните изображение в элемент <div> со свойством display: table для оптимизации масштабирования:

<div style="display: table; width: 100%;">
    <img src="image.jpg" class="img-responsive" style="display: table-cell; max-width: none;" alt="...">
</div>

Свойство max-width: none; позволит изображению игнорировать стандартные ограничения и подстроиться под размеры контейнера.

Визуализация

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

img-responsive это некая кожа хамелеона:

🦎 < 🏞️: Хамелеон изменяет свой цвет в соответствии со средой.

Когда возникает необходимость заполнить больше пространства, чем позволяют исходные размеры, свойство width становится равным 100%:

img {
    width: 100%;
    height: auto;
}

🦎🌈➕: Изображение способно масштабироваться под любые условия.

Управление изображениями для различных устройств с помощью пользовательских медиа-запросов

Для обеспечения максимальной адаптивности изображений под все возможные устройства, вы можете использовать тонкую настройку медиа-запросов:

Планшеты — качество и соотношение сторон

На планшетах важно обеспечить сохранение чёткости и пропорций изображений:

@media (min-width: 768px) and (max-width: 991px) {
    .img-responsive {
        max-width: 100%;
        height: auto;
    }
}

Смартфоны — максимальное использование пространства

На экранах смартфонов изображения должны эффектно занимать всю доступную ширину:

@media (max-width: 767px) {
    .img-responsive {
        width: 100%;
        height: auto;
    }
}

Большие экраны — подчёркиваем присутствие

На больших мониторах изображения должны демонстративно занять своё место:

@media (min-width: 992px) {
    .img-responsive {
        min-height: 400px; /* Настраивайте под свои требования */
    }
}

Система сеток и брейкпоинты Bootstrap — ваша страховка

Сеточная система Bootstrap поможет сгармонизировать изображения с остальными элементами дизайна:

Контейнер "product-img" для ещё большей гибкости

Использование дополнительных обёрток с классом product-img даст вам дополнительный контроль над позиционированием изображений:

<div class="col-md-4 col-sm-4 col-xs-12 product-img">
    <img src="image.jpg" class="img-responsive" alt="...">
</div>

Такое размещение изображения позволит ему гармонично вписываться в дизайн сайта на любых устройствах.

Полезные материалы

1. CSS · Bootstrap — Общие сведения о работе с адаптивными изображениями в Bootstrap 3.
2. Responsive Images: If you're just changing resolutions, use srcset. | CSS-Tricks — подробный анализ использования атрибута srcset для создания адаптивных изображений.
3. <img>: The Image Embed element – HTML — справочник MDN по HTML-элементу <img>.
4. Responsive Image Breakpoints Generator by Cloudinary — инструмент для генерации брейкпоинтов и оптимизации адаптивных изображений.
5. Responsive Images Done Right: A Guide To <picture> and srcset — детальное руководство по работе с адаптивными изображениями, используя <picture> и srcset.
6. Responsive Images in Practice – A List Apart — практические советы по созданию адаптивных изображений.
7. Android just load default layout – Stack Overflow — обсуждение методов создания адаптивных изображений в Bootstrap 3.