Автоматическое изменение размера двух изображений в div при изменении ширины браузера

Question

Я рассмотрел ответы многих разных народов на эту проблему, но они учитывают только одно изображение. У меня проблема с двумя изображениями, которые я разместил в своем заголовке, когда я изменяю размер моего браузера, я хочу, чтобы они уменьшались с ним, чтобы они не смещали весь мой сайт.

у меня есть она принимала в раздаточной, так что вы можете увидеть, что моя проблема: https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html

также другая проблема, им с ООН является прикрепление колонтитула в нижней части экрана и поставить его ниже тела, так что пользователи должны прокрутить вниз. p.s Я приложил нижний колонтитул к дну много месяцев назад, и я забыл, как его отменить.

ОГОРЧЕННО ДЛЯ СТРАШНО MESSY КОД

заранее спасибо

Арран, 16

Answer 1

Вот как я бы это сделать. Сначала создайте каждое изображение с помощью CSS, чтобы иметь width:100% и height:auto. Это заставляет их реагировать на размеры их контейнеров. Потеряйте те width и height атрибуты из тега img. Я даже не уверен, что они действительны.

Теперь вот где умная часть. Ваши изображения 550px и 298px широкий, что составляет примерно 65%: 35%. Когда заголовок находится в самой узкой точке перед взломом, он примерно такой же, как и сумма двух. Поэтому дайте контейнер большого изображения max-width:65%, а контейнер с маленьким изображением divmax-width:35%.

Таким образом, когда окно браузера меньше, изображения снижаются соответственно - и не становятся больше, чем они должны быть, когда окно широко. Я попробовал это на вашей странице, и я думаю, что это сработало - посмотрите, работает ли оно на вас. :)