Puis-je définir la hauteur d'un div en fonction d'une largeur basée sur un pourcentage ?

Question

Disons que j'ai un div qui a une largeur de 50% du corps. Comment faire pour que sa hauteur soit égale à cette valeur ? Ainsi, lorsque la fenêtre du navigateur mesure 1 000 pixels de large, la hauteur et la largeur du div sont toutes deux de 500 pixels.

Answer 1

<div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

Pour que cela fonctionne, je pense que vous devez définir le rembourrage sur ex. Haut? comme ça:

 <div><p>some unnecessary content</p></div>

div{
    border: 1px solid red;
    width: 40%;
    padding-top: 40%;
    box-sizing: border-box;
    position: relative;
}
p{
    position: absolute;
    top: 0;
    left: 0;
}

de toute façon, c'est comme ça que je l'ai fait fonctionner, car avec juste un rembourrage tout autour, ce ne serait pas un carré.