Притормаживаем резиновые изображения

Итак, теперь наши изображения соответствующим образом масштабируются при увеличении и уменьшении области просмотра. Однако если область просмотра увеличится настолько, что при масштабировании рисунка будут превышены его естественные размеры, то все станет выглядеть очень некрасиво. Взгляните на изображение статуэтки «Оскар» в области просмотра шириной больше 1900 пикселов (рисунок 3.9).

Страница нашего сайта в области просмотра шириной более 1900 пикселов.

Фактическая ширина рисунка oscar. png составляет 202 пиксела. Однако если ширина области просмотра окажется более 1900 пикселов и этот рисунок будет пропорционально отмасштабирован, то при отображении его ширина составит свыше 300 пикселов. Мы можем легко «притормозить» рисунок, определив еще одно, более приоритетное правило:

.oscarMain { float: left; margin-top: -28px; width: 28.9398281%; /* 698х202 */ max-width: 202px;

}

В результате изображение oscar. png сможет масштабироваться благодаря общему правилу, которое указано для него, однако ширина рисунка никогда не будет выходить за пределы значения, заданного для более приоритетного свойства max-width в приведенном выше коде. Вот как наша страница будет выглядеть после применения такого правила (рисунок 3.10).

Рисунок теперь отображается корректно

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *