web-dev-qa-db-fra.com

Faire un carré <div> lorsqu'il y a une largeur changeant dynamiquement en fonction du pourcentage

Je travaille sur une application Web qui générera une grille NxN basée sur la sélection de l'utilisateur par N. Je veux que la largeur totale de la grille soit relative (c'est-à-dire 100% de l'espace disponible) afin que les utilisateurs puissent imprimer sur différents formats de papier .

Je peux facilement calculer la largeur des carrés dans la grille en% (c'est-à-dire: 100%/N), mais j'ai des problèmes pour calculer la hauteur. La hauteur d'une page Web sera toujours infinie à moins que je ne la limite artificiellement, ce que, comme je l'ai dit, je ne veux pas faire.

Comment puis-je faire les carrés de ma grille sont carrés par rapport à rectangulaire lorsque les contraintes de hauteur et de largeur de ma grille sont dynamiques et non carrées?

htmlcssgrid-layoutdimensionsaspect-ratio
32
Nate

Ceci n'est pas testé, je ne sais pas comment faire cela en CSS uniquement, j'utiliserais jQuery.

$('div').height($('div').width());
22
Christopher Altman

Il existe 2 techniques principales pour conserver le rapport hauteur/largeur d'un élément réactif, en utilisant le rembourrage et les unités vw:
(pour une solution complète pour une grille réactive de carrés, vous pouvez voir cette réponse )

Utiliser des unités VW

Vous pouvez utiliser les unités vw pour rendre vos éléments carrés et réactifs ( nités d'affichage sur MDN ).
1vw = 1% of viewport width pour pouvoir définir la hauteur des éléments en fonction de la largeur de la fenêtre.
Exemple avec une grille 4x4:

body{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

div{
    width:23vw; height:23vw;
    margin:1vw 0;
    background:gold;  
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Le même comportement peut être obtenu en dimensionnant l'élément selon la hauteur de la fenêtre d'affichage en unités vh.

Utilisation du rembourrage

Le rembourrage est calculé en fonction de la largeur des conteneurs, vous pouvez donc l'utiliser pour définir la hauteur du bloc en fonction de sa largeur.
Exemple avec une grille 4x4:

.wrap {
    width:80%;
    margin:0 auto;
}
.wrap div {
    width:23%;
    padding-bottom:23%;
    margin:1%;
    float:left;
    background:gold;
}
<div class="wrap">
    <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
39
web-tiki

Faire un div en carré est assez simple avec CSS. Vous définissez une largeur, disons 50%. Ensuite, vous ajoutez un fond de remplissage de la même valeur:

div {
width: 50%;
padding-bottom: 50%;
}

et il restera carré chaque fois que vous redimensionnerez la fenêtre.

.

.

Vous pouvez le faire avec n'importe quel rapport latéral que vous souhaitez, si vous souhaitez que la boîte soit à 16: 9, vous calculez:

9/16 = 0,56

que vous multipliez ensuite par la largeur de votre élément (dans ce cas 50% (= 0,5)), donc:

9/16 * 0,5 = 0,28 = 28%

20
LeeCanvas