Зависимость height от widht (в %)

#вёрстка #css #height

                    
Добрый вечер! Потихоньку начал осваивать CSS, поэтому прошу — сильно не пинайте,
если вопрос глупый. :)
Произвожу блочную верстку страницы, все вычисления размеров блоков ведутся в %.
Проблема в следующем — поскольку при изменении формата разрешения (4:3 или 16:9)
изменяется вычисление параметра widht, как для контейнера (контейнер у меня = 100%),
так и для блока (=10%), то весь блок растягивается и превращается в прямоугольник,
а мне нужны квадраты.
Вопрос: что нужно сделать, чтобы параметр height вычислялся из widht и был ему равен? 
То есть как сделать зависимость height от widht, чтобы height подстраивался под widht,
и тем самым высота блока была равна ширине и при этом параметр widht мог бы спокойно
"гулять" в зависимости от формата экрана? Получается, height должен "гулять" вместе
с widht... Ну как-то так. :)    

Ответы

Ответ 1

Use CSS to Specify the Aspect Ratio of a Fluid Element
Creating Intrinsic Ratios for Video
Адаптивные фоновые изображения (на русском)
пример


Ответ 2

.square{
    width:20%;
    border:1px solid blue;
}

.square::before{
    content:"";
    display:block;
    padding-top:100%;
}