Установка высоты div в зависимости от ее ширины

Question

Можно ли динамически установить ширину divs, а затем установить ее высоту на определенный процент от этой ширины. Что-то вроде этого:

#myDiv{ 
    width:%100; 
    height: {35% of width}; 
} 

Я хочу сохранить отношение ширины к высоте div независимо от ширины.

Answer 1

HTML:

<div class='box'> 
    <div class='content'>All your content are belong to us</div> 
</div> 

Мы используем два блока элементов для достижения желаемого поведения , поле ширины, содержание для высоты.

CSS:

.box{ 
    position: relative; 
    width: 50%;  /* desired width */ 
} 
.box:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /*What you want the height to be in relation to the width*/ 
} 

Содержание:
Затем установите содержание, чтобы охватить весь ящик абсолютно так независимо от размера, он подходит!

.content{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

Тада вы сделали ...

ИСТОЧНИК: Pure CSS

Answer 2

Попробуйте простой JavaScript:

document.getElementById("elemID").style.height = 
Math.round((document.getElementById("elemID").style.width * 100)/35) + "px"; 

Это позволит получить процент (округленно) из с, и назначить его на высоту.

Answer 3

Вы можете сделать это с помощью CSS, установив высоту в ноль, а затем добавив процент к нижней части. Вы, возможно, придется настроить его немного, чтобы получить желаемый результат, но вот скрипку с примером http://jsfiddle.net/wbq8o3s7/

#myDiv{ 
    width:%100; 
    height:0; 
    padding-bottom:35%; 
    background-color:#333; 
}