Hauteur égale à la largeur dynamique (CSS design fluide)

Question

Est-il possible de mettre à la même hauteur que la largeur (ratio 1:1)?

Exemple

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}

Merci à l'avance!

Answer 1

[Mise à jour: Même si j'ai découvert cette astuce de façon indépendante, depuis j'ai appris que Thierry Coblence me battre pour elle. Vous pouvez trouver son 2009 article sur Une Liste à Part. De crédit lorsque le crédit est dû.]

Je sais que c'est une vieille question, mais j'ai rencontré un problème similaire que je ne résoudre qu'avec le CSS. Voici mon blog qui traite de la solution. Inclus dans le poste est un exemple vivant. Le Code est affiché de nouveau ci-dessous.

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

Answer 2

Il y a un chemin à l'aide de CSS!

Si vous définissez la largeur de votre fonction sur le conteneur parent, vous pouvez régler la hauteur à 0 et padding-bas pour le pourcentage qui sera calculée en fonction de la largeur actuelle:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

Cela fonctionne bien dans tous les principaux navigateurs.

Answer 3

Simple et neet : utiliser vw des parts d'un réactif de hauteur/largeur en fonction de la largeur de la fenêtre d'affichage.

vw : 1/100e de la largeur de la fenêtre d'affichage. (Source MDN)

DÉMO

HTML:

<div></div>

CSS pour un rapport de 1:1 rapport d'aspect:

div{
    width:80vw;
    height:80vw; /* same as width */
}

---

Tableau pour calculer la hauteur en fonction du rapport d'aspect et la largeur de l'élément.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

---

Cette technique vous permet de :

• insérer n'importe quel contenu à l'intérieur de l'élément sans l'aide d' position:absolute;
• aucun élément de balisage HTML (un seul élément)
• adapter les éléments de rapport d'aspect en fonction de la hauteur de la fenêtre d'affichage à l'aide de vh unités
• vous pouvez faire un réactif de carré ou d'autres proportions toujours s'inscrit dans la fenêtre d'affichage en fonction de la hauteur et la largeur de la fenêtre d'affichage (voir cette réponse : Réactif carré en fonction de la largeur et de la hauteur de la fenêtre d'affichage ou cette démo)

Ces unités sont pris en charge par IE9+ voir canIuse pour plus d'info

Answer 4

Il est possible sans Javascript :)

Cet article décrit parfaitement http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Le code HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div> 

Le CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

Answer 5

Cela ne peut être fait avec CSS seul. À l'aide de jQuery, vous pouvez atteindre cet objectif en faisant

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Vérifier exemple de travail à http://jsfiddle.net/n6DAu/1/