Puis-je mettre à l’échelle une hauteur de div proportionnellement à sa largeur en utilisant CSS?

Puis-je définir une variable en CSS comme je veux que la hauteur de mon div soit toujours la moitié de la largeur? Mon div balance avec la largeur de l’écran

CSS:

 .ss { width:30%; height: half of the width; } 

Cette largeur de 30% s’ajuste à la résolution de l’écran

Vous pouvez le faire avec l’aide du remplissage sur un élément parent, car le remplissage relatif (même en hauteur) est basé sur la largeur de l’élément parent.

CSS:

 .imageContainer { position: relative; width: 25%; padding-bottom: 25%; float: left; height: 0; } img { width: 100%; height: 100%; position: absolute; left: 0; } 

Pour plus de détails, consultez cet article sur le sujet http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/

Un autre excellent moyen d’y parvenir consiste à utiliser une image transparente avec un format d’image défini. Définissez ensuite la largeur de l’image sur 100% et la hauteur sur auto. Cela va malheureusement repousser le contenu original du conteneur. Vous devez donc envelopper le contenu original dans un autre div et le placer absolument en haut du div parent.

 
Content

CSS

 .parent { position: relative; } .aspect-ratio { width: 100%; height: auto; } .content { position: absolute; width: 100%; top: 0; left: 0; } 

Si vous voulez un dimensionnement vertical proportionnel à une largeur définie en pixels sur un div englobant, je pense que vous avez besoin d’un élément supplémentaire, comme ceci:

 #html 
Put content here
#css .ptest { width: 200px; position: relative; } .ptest-wrap { padding-top: 60%; } .ptest-inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #333; }

Voici la solution 2 div qui ne fonctionne pas. Notez que le remplissage vertical à 60% est proportionnel à la largeur de la fenêtre, et non à la largeur de div.ptest :

http://jsfiddle.net/d85FM/

Voici l’exemple avec le code ci-dessus, qui fonctionne:

http://jsfiddle.net/mmq29/

Pour ceux qui recherchent une solution évolutive: J’ai écrit un petit utilitaire d’aide dans SASS pour générer des rectangles proportionnels réactifs pour différents points d’arrêt. Jetez un coup d’œil aux proportions du SASS

J’espère que ça aide n’importe qui!

Cette réponse est très similaire à celle des autres, sauf que je préfère ne pas utiliser autant de noms de classes. Mais c’est juste la préférence personnelle. Vous pourriez faire valoir que l’utilisation de noms de classes sur chaque div est plus transparente que le fait de déclarer le but des divs nesteds.

 

Content

Voici le CSS générique:

 .proportional { position:relative; } .proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; } 

Ensuite, ciblez la première div interne pour définir la largeur et la hauteur (padding-top):

 #MyDiv > div { width:200px; padding-top:50%; }