Garante que um elemento com variável width
reterá um height
de valor proporcional.
- Aplique
padding-top
no:before
(pseudo-element), tornando oheight
do elemento igual a uma porcentagem do seuwidth
. - A proporção de
height
ewidth
pode ser alterada conforme necessário. Por exemplo, umpadding-top
de100%
criará um quadrado responsivo (proporção de 1: 1).
HTML
<div class="constant-width-to-height-ratio"></div>
CSS
.box {
background: #9C27B0;
width: 200px;
}
.box:before {
content: '';
padding-top: 100%;
float: left;
}
.box:after {
content: '';
display: block;
clear: both;
}
Exemplo de código:
Você pode editar o padding-top
no ::before
criando novas proporções. Teste!