web-dev-qa-db-fra.com

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

Est-il possible de définir 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
}
javascriptjqueryhtmlcssresponsive-design
400
Thomas Norman

En utilisant jQuery, vous pouvez y parvenir en faisant

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

Consultez l'exemple de travail sur http://jsfiddle.net/n6DAu/1/

64
Hussein

[Mise à jour: Bien que j’ai découvert ce truc de façon indépendante, j’ai depuis appris que Thierry Koblentz me battait. Vous pouvez trouver son article de 2009 sur A List Apart. Crédit où le crédit est dû.]

Je sais que c’est une vieille question, mais j’ai rencontré un problème similaire que je n’avais résolu que par CSS. Voici mon article de blog qui traite de la solution. Ce message contient un exemple en direct . Le code est republié 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! */
}

#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! */
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>
667
Nathan Ryan

Il existe un moyen d'utiliser CSS!

Si vous définissez votre largeur en fonction du conteneur parent, vous pouvez définir la hauteur sur 0 et définir padding-bottom sur le pourcentage qui sera calculé 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.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

384
Kristijan

C'est possible sans Javascript :)

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

Le 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%;
}
92
Sathran

Simple et neet: utilisez vw unités pour une hauteur/largeur sensible en fonction de la largeur de la fenêtre.

vw: 1/100ème de la largeur de la fenêtre. ( Source MDN )

DÉMO

HTML: 

<div></div>

CSS pour un rapport de format 1: 1:

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

Tableau pour calculer la hauteur en fonction du format et de la largeur souhaités 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 utiliser position:absolute;
  • pas de balise HTML inutile (un seul élément)
  • adapter le rapport hauteur/largeur des éléments en fonction de la hauteur de la fenêtre en utilisant des unités vh
  • vous pouvez créer un carré réactif ou un autre format qui s'adapte toujours à la fenêtre en fonction de la hauteur et de la largeur de la fenêtre (voir cette réponse: carré réactif en fonction de la largeur et de la hauteur de la fenêtre ou ceci démo )

Ces unités sont supportées par IE9 + voir canIuse pour plus d’informations

67
web-tiki

Méthode extrêmement simple jsfiddle

HTML

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

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}
57
Ninjakannon

En développant la technique de remplissage haut/bas, il est possible d'utiliser un pseudo élément pour définir la hauteur de l'élément. Utilisez les marges flottantes et négatives pour supprimer le pseudo-élément du flux et de la vue.

Cela vous permet de placer du contenu dans la boîte sans utiliser de positionnement supplémentaire div et/ou CSS.

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}


/* proportions */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}


/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}
<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>
8
Salman A

c'est vraiment un commentaire pour la réponse de Nathan, mais je ne suis pas encore autorisé à le faire ...
Je voulais conserver les proportions, même s’il y avait trop de choses à ranger dans la boîte. Son exemple élargit la hauteur, changeant les proportions. J'ai trouvé en ajoutant

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

à l'élément. Voir http://jsfiddle.net/B8FU8/3111/

4
craq