Puis-je définir la hauteur d’un div sur la base d’une largeur en pourcentage?

Cela peut être fait avec du CSS pur si vous êtes prêt à accepter certaines ressortingctions et problèmes entre navigateurs. Cependant, il peut être fait facilement et avec souplesse avec Javascript. Si vous avez besoin d’une solution CSS pure, consultez les autres réponses.

Définissez la largeur de la div sur (par exemple) 50%, utilisez JavaScript pour vérifier sa largeur, puis définissez la hauteur en conséquence. Voici un exemple de code (j’utilise jQuery, une bibliothèque JavaScript):

$(function() { var div = $('#dynamicheight'); var width = div.width(); div.css('height', width); }); 

 #dynamicheight { width: 50%; /* Just for looks: */ background-color: cornflowerblue; margin: 25px; } 

Cela peut être fait avec seulement CSS, mais le contenu dans le div doit être absolument positionné. La clé consiste à utiliser le remplissage en pourcentage et l’atsortingbut CSS box-sizing: border-box :

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

 
 
Some unnecessary content.
  

 
some unnecessary content
 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 remplissage à ex. Haut? comme ça:

 
some unnecessary content
 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 le rembourrage tout autour ce ne serait pas un carré.

J’ai opté pour une approche CSS adaptée à la largeur de la fenêtre d’affichage, mais maximale à 100% de la hauteur de la fenêtre d’affichage. Il ne nécessite pas de box-sizing:border-box . Si un pseudo-élément ne peut pas être utilisé, le CSS du pseudo-code peut être appliqué à un enfant. Démo

 .container { position: relative; max-width:100vh; max-height:100%; margin:0 auto; overflow: hidden; } .container:before { content: ""; display: block; margin-top: 100%; } .child { position: absolute; top: 0; left: 0; } 

Table de support pour les unités de fenêtre

J’ai écrit à propos de cette approche et d’autres dans un article CSS-Tricks sur la mise à l’ échelle des animations réactives que vous devriez vérifier.