Масштабирование по высоте с заданными пропорциями - HTML и CSS

InternetStranger · 09.08.2012, 16:04

Здравствуйте!
Помогите пожалуйста, кто чем может: советом, кодом. Нужно, чтобы исходя из высоты пользовательского окна, элемент масштабировался по высоте (height:33% например), а ширина вычислялась согласно заданным пропорциям (например, WxH=3x2). Задача похожа на описанную раньше, только мне масштабировать нужно по высоте. Идея проста: воткнуть в качестве распорки картинку соответствующей пропорции. Код страницы такой:

Код HTML:

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Масштабирование по высоте</title>
    <style>
        html,body   { height:100%; margin:0; padding:0; width:100%; }
        #wrap       { position: absolute; width: 80%; height: 80%; border: 3px double #000;  }
        #img        {
            height:100%;        /* Понимает FF */
            min-height: 100%;   /* Начинает понимать Opera */
            border: 2px solid #AAA;
        }
        #conteiner {
            position: relative;
            height: 30%;
            float: left;
            border: 1px dashed #AAF;
        }
        #iframe {
            position:absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #CCC;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div id="conteiner">
            <img src='images/30x20.png' alt="" id="img" />
            <div id="iframe">1</div>
        </div>
    </div>
</body>
</html>

Страница также доступна по ссылке:

А вот и результаты отображения в браузерах (см.рис.1): FF+Opera худо-бедно понимают масштабирование: при ресайзе окна, img меняет размеры, а #iframe таким и остается (см.рис.2). Только после обновления страницы к контейнерам получает новый размер. Chrome мутный какой-то (то масштабирует, то нет). IE совсем никак не реагирует (см.рис.3).

PS: вообще хотелось бы решить задачу без js. Пусть и через мега-конструкцию, но нативную )

PSS: аналогичное масштабирование по ширине отлично работает.

pekinessik · 18.08.2012, 11:38

Для этой проблемы очень хорошо подходят SASS или Internal CSS

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
растягивание таблиц по высоте	BloodMaX	HTML и CSS	0	20.12.2011 14:59
Операции над многочленами, заданными списком свомх коэффициентовОперации над многочленами, заданными списком свомх коэффициентов	lelicki_bolicki	Общие вопросы по Java, Java SE, Kotlin	1	06.12.2011 22:07
деформирование странице по высоте	Lx62GjVWZQJFjPD	HTML и CSS	0	27.10.2011 14:24
Выравнивание по высоте	Painkiller_13	Общие вопросы Delphi	2	09.07.2011 18:47
Проблема в высоте таблицы в ие7	siteograf	HTML и CSS	0	09.05.2010 21:24

18.08.2012, 11:38	#2
pekinessik Регистрация: 14.09.2009 Сообщений: 5	Для этой проблемы очень хорошо подходят SASS или Internal CSS