Hauteur égale à la largeur dynamique (disposition du liquide CSS) [dupliquer]

cette question a déjà une réponse ici:

  • Maintenir le ratio d'aspect d'un div avec CSS 19 réponses

est-il possible de régler la même hauteur que la largeur (rapport 1:1)?

exemple

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

CSS

div {
  width: 80%;
  height: same-as-width
}
374
demandé sur web-tiki 2011-03-27 00:35:42

9 réponses

en utilisant jQuery vous pouvez atteindre cet objectif en faisant

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

vérifier l'exemple de fonctionnement à http://jsfiddle.net/n6DAu/1 /

66
répondu Hussein 2014-12-05 16:05:22

[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. Le crédit là où le crédit est dû.]

je sais que c'est une vieille question, mais j'ai rencontré un problème similaire que je a fait résoudre seulement avec CSS. Voici mon blog post qui discute de la solution. Inclus dans la poste est un live exemple . 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! */
}

#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>
648
répondu Nathan Ryan 2017-10-05 05:48:42

il y a un moyen d'utiliser CSS!

si vous définissez votre largeur en fonction du conteneur parent, vous pouvez définir la hauteur à 0 et padding-bottom au 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 /

360
répondu Kristijan 2018-03-22 06:22:15

il est possible sans aucun Javascript:)

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

the HTML:

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

The 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%;
}
83
répondu Sathran 2014-05-07 12:46:19

Simple et neet: utiliser vw unités pour une hauteur/largeur de réponse en fonction de la largeur du viewport.

vw: 1/100ème de la largeur du viewport. ( source MDN )

DÉMO

HTML:

<div></div>

CSS pour un rapport d'aspect 1:1:

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

Table pour calculer la hauteur selon le rapport d'aspect désiré 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 tout contenu à l'intérieur de l'élément sans utiliser position:absolute;
  • no un necessary HTML markup (only one element)
  • adapter le rapport d'aspect des éléments en fonction de la hauteur du viewport en utilisant les unités vh
  • vous pouvez faire un carré responsive ou un autre rapport d'aspect qui s'adapte toujours dans le viewport selon la hauteur et la largeur du viewport (voir cette réponse: carré Responsive selon la largeur et la hauteur du viewport ou ce demo )

ces unités sont soutenu par IE9+ voir canIuse pour plus d'information

61
répondu web-tiki 2017-05-23 12:10:29

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%;
}
53
répondu Ninjakannon 2016-05-10 15:53:32

de développer le rembourrage supérieur/inférieur technique, il est possible d'utiliser un pseudo-élément pour régler la hauteur de l'élément. Utilisez le débordement, le flottant et les marges négatives pour supprimer le pseudo-élément de la vue et du flux.

cela vous permet de placer du contenu à l'intérieur de la boîte sans utiliser un positionnement supplémentaire de div et/ou CSS.

.fixed-ar {
  overflow: hidden;
}
.fixed-ar:before {
  content: "";
  float: left;
  margin-left: -10px;
  width: 10px;
  padding-top: 100%;
}
.fixed-ar-4-3:before {
  /* 100 * 3 / 4 = 75 */
  padding-top: 75%;
}
.fixed-ar-16-9:before {
  /* 100 * 9 / 16 = 56.25 */
  padding-top: 56.25%;
}
/* examples */
.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  color: #999;
  background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
  background-size: contain;
}
<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>
5
répondu Salman A 2014-11-26 11:04:30

c'est un commentaire à la réponse de Nathan, mais je n'ai pas encore le droit de le faire...

Je voulais maintenir le format, même s'il y a trop de choses à rentrer dans la boîte. Son exemple élargit la hauteur, changeant le rapport d'aspect. J'ai trouvé en ajoutant

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

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

4
répondu craq 2013-07-12 15:30:32

largeur: 80vmin; hauteur: 80vmin;

CSS n'80% de la plus petite vue, la hauteur ou la largeur

http://caniuse.com/#feat=viewport-units

-2
répondu Andy Dickinson 2014-11-04 06:17:43