Приоритетные правила для конкретных изображений

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

<img class="sideImage" src="img/wyattEarp. jpg" alt="Wyatt Earp" />

Затем мы могли бы задать особое правило для ширины. Однако вместо этого оставим нашу разметку как есть и используем CSS-приоритеты для переопределения

Существующего правила max-width другим, более приоритетным правилом для изображений во врезке:

Img { max-width: 100%;

}

.sideBlock img { max-width: 45%;

}

На рисунке 3.8 показано, как наша страница теперь будет выглядеть в браузере.

Обновленная страница.

Подобное использование CSS-приоритетов также позволяет нам получить еще больший контроль над шириной всех остальных изображений и мультимедиа. Кроме того, из главы 5 вы узнаете, как новые мощные CSS3-селекторы дают возможность нацеливаться практически на любой элемент без дополнительной разметки или применения JavaScript-фреймворков вроде библиотеки jQuery для выполнения этой тяжелой работы.

Для каждого из изображений, расположенных по два во врезке, я решил задать ширину величиной 45 %, поскольку знаю, что позднее потребуется добавить не-

Большое поле между рисунками, благодаря чему получится два изображения, ширина которых в сумме будет составлять 90 %, то есть у нас останется небольшое свободное пространство (10 %).

Теперь, когда с рисунками во врезке все в порядке, удалим атрибуты width и height и из разметки, описывающей изображение статуэтки «Оскар». Однако если не задать для этого рисунка значения пропорциональной ширины, он не будет масштабироваться. Я откорректировал соответствующий CSS-код и указал величину пропорциональной ширины, воспользовавшись для ее вычисления старой доброй и проверенной формулой ширина цели х ширина контекста = результат.

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

}

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

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