Как сделать так, чтобы изображения масштабировались относительно области просмотра

Представьте, что в нашей врезке размещаются постеры двух замечательных кинокартин и двух фильмов, которые можно назвать полной чепухой (здесь мы не будем дискутировать на эту тему). Соответствующая разметка на данный момент выглядит так:

<!— врезка —>

<div id="sidebar">

<div class="sideBlock unSung">

<h4>Unsung heroes…</h4>

<a href="#"><img src="img/midnightRun. jpg" alt="Midnight Run" width="99" height="135" /></a>

<a href="#"><img src="img/wyattEarp. jpg" alt="Wyatt Earp" width="99" height="135" /></a>

</div>

<div class="sideBlock overHyped">

<h4>Overhyped nonsense…</h4>

<a href="#"><img src="img/moulinRouge. jpg" alt="Moulin Rouge" width="99" height="135" /></a>

<a href="#"><img src="img/kingKong. jpg" alt="King Kong" width="99" height="135" /></a>

</div>

</div>

Несмотря на то что мы добавили объявление max-width: 100% в элемент img в CSS-коде, ничего не изменилось и изображения не масштабируются по мере расширения области просмотра (рисунок 3.6).

После внесенных изменений изображения по-прежнему не масштабируются.

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

<img src="img/wyattEarp. jpg" alt="Wyatt Earp" width="99" height="135" />

Еще одна мальчишеская ошибка! Необходимо откорректировать разметку, ассоциированную с изображениями, удалив атрибуты height и width:

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

Посмотрим, что это нам даст, обновив страницу в окне браузера (рисунок 3.7).

Изображения на странице увеличились.

Что ж, внесенные исправления определенно сработали! Однако возникла другая проблема. Поскольку изображения масштабируются с целью заполнить 100 % ширины их элемента-контейнера, каждое заполняет всю врезку по ширине. Как и всегда, решить эту проблему можно разными способами.