В большинстве случаев и свойство overflow, и правило max-width: 100 % довольно функциональны и работают для большинства медиа-файлов. Лично я успешно применял их в различных «резиновых» сетках.

Но при этом оба подхода абсолютно нечувствительны к содержанию. Каждый из них устанавливает некоторые основные правила, которым следуют изображения по отношению к своим контейнерам: max-width: 100 % масштабирует картинку в соответствии с размерами контейнера, а overflow позволяет убрать лишние данные, выходящие за его пределы.

Но что если вам предстоит работа со сложной графикой или изображением, которое несет определенную информационную нагрузку (рис. 3.16)? В этом случае простое масштабирование или обрезание нежелательны, поскольку могут помешать пользователю правильно понять информацию, содержащуюся в изображении.

Рис. 3.16. Эта отличная инфографика с сайта BBC News содержит жизненно необходимую с точки зрения контента информацию. Простое масштабирование может оказаться неэффективным

В этом случае нужно найти способы передачи различных вариантов одной и той же картинки в разных диапазонах разрешений. Другими словами, вы можете создать один образец для десктопных браузеров, а второй, более линейный, – для устройств с маленькими экранами. Задав эти параметры, вы можете положиться на сервер, который сам выберет наиболее подходящее изображение.

Такое решение выходит за рамки данной книги (и не всегда по силам вашему покорному слуге), однако дизайнер-разработчик Брайан Ригер описал возможный подход в своем блоге (), откуда вы и сможете его скачать.

Если вы решили использовать серверное решение, его можно укрепить различными клиентскими приемами, которые мы уже обсуждали. Например, вы можете создать несколько вариантов изображения под разные диапазоны разрешений, а затем использовать правило max-width: 100 %, чтобы сгладить переход на другие устройства, браузеры и диапазоны разрешений.