Как отрегулировать ширину DIV на высоту с помощью CSS

Question

У меня есть обертка div с max-width от 1000px и max-height от 650px.

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

Я использую HTML5 и CSS3. Это попытка создать отзывчивый макет, который работает на настольных и мобильных устройствах.

Answer 1

Как вы используете CSS3 вы можете использовать the vmin or vmax units. 1 vmin эквивалентно 1/100 размера, который наименьший из высоты или ширины, тогда как 1 vmax равен 1/100 размера большего значения. Если экран пользователя имел разрешение 1000x800px, то 100vmin будет равен 800px, а 100vmax будет равно 1000px, так как высота здесь меньше, а ширина - это более крупный блок.

В вашем случае вы можете использовать его как это:

div { 
    height: 65vmin; 
    width: 100vmin; 
} 

Или:

div { 
    height: 65vmax; 
    width: 100vmax; 
} 

JSFiddle demo.

Обратите внимание, что вам придется самостоятельно корректировать эти значения. 100vmin здесь установит ширину в полный размер высоты или ширины экрана (в зависимости от того, что наименьшее), и это может быть нежелательным эффектом.

К сожалению, к этому подходу относится несколько проблем с браузером. Поскольку они являются новыми подразделениями, поддержка не идеальна. Некоторые браузеры не будут изменять размер контейнера до тех пор, пока страница не будет перезагружена.

Answer 2

Представляют ширину и высоту с помощью % DEMO

Попробуйте это,

HTML:

<div><p>content</p></div> 

CSS:

div { 
    border: 1px solid red; 
    width: 35%; 
    padding: 40%; 
    box-sizing: border-box; 
    position: relative; 
} 

p { 
position: absolute; 
top: 0; 
left: 0; 
} 

Использование Jquery,

JQuery Код:

var width = $('#widthHeight').width(); 
$('#widthHeight').css('height', width); 

jqueryDEMO

Answer 3

Довольно легко регулировать высоту до ширины.

Поскольку padding проценты относительно родителя width (даже для высоты да) вы можете сделать что-то вроде этого:

.smth { height: 0; padding: 100% 0 0 0; }

Answer 4

Как об этом:

FIDDLE

div 
{ 
    width: 153.8vh; /* 100/65 * 100 */ 
    height: 65vw; /* 100/1.538 = 65 */ 
    background: pink; 
    max-height: 650px; 
    max-width: 1000px; 
    margin: auto; 
    position: absolute; 
    top:0;bottom:0; /* vertical center */ 
    left:0;right:0; /* horizontal center */ 
}