Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров (включая Internet Explorer версии 7 и выше) не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:
Img { max-width: 100%;
}
В результате все изображения будут масштабироваться вплоть до 100 % ширины их элемента-контейнера. Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:
Img, object, video, embed { max-width: 100%;
}
Они тоже будут масштабироваться, не считая нескольких примечательных исключений вроде видео в теге <iframe> с сайта YouTube. О том, как с ними справиться, мы поговорим в главе 4. А сейчас сосредоточимся на изображениях, поскольку принцип будет тем же, что и раньше, независимо от мультимедиа.
При использовании этого подхода необходимо учитывать несколько важных моментов. Во-первых, он предполагает упреждающее планирование: добавляемые изображения должны быть достаточно велики для того, чтобы масштабироваться соразмерно крупным областям просмотра. Это приводит нас к следующему, возможно, более важному моменту. Независимо от того, каким будет размер области просмотра или устройство, используемое для обозрения сайта, все равно придется загружать большие изображения, даже если в области просмотра на определенных устройствах пользователям потребуется увидеть то или иное изображение размером всего лишь 25 % от его фактической величины. В некоторых случаях проблема заключается в скорости канала подключения пользователя, поэтому мы вскоре вернемся ко второму из описанных выше моментов. А пока позаботимся о том, чтобы наши изображения масштабировались.
Добавить комментарий