Faire un carré quand il y a une largeur changeant dynamiquement en fonction du pourcentage [double]

Question

    

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

    

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

    

Je travaille sur une application web qui va générer une grille NxN basée sur la sélection de l'utilisateur de N. Je veux la largeur totale de la grille soit relative (soit 100% de l'espace disponible) afin que les utilisateurs puissent imprimer sur différents formats de papier.

I peut facilement calculer la largeur des carrés de la grille en% (soit 100% / N), mais je rencontre des problèmes de calcul de la hauteur. La hauteur d'une page web est toujours va être infinie à moins que je limite artificiellement qui, comme je l'ai dit, je ne veux pas faire.

Comment puis-je faire les places dans ma grille soit carré par rapport rectangulaire lorsque les contraintes de hauteur et la largeur de ma grille sont dynamiques et non carré?

Answer 1

Ceci est un test, je ne sais pas comment le faire que dans CSS, j'utiliser jQuery.

$('div').height($('div').width());

Answer 2

Il y a 2 principales techniques pour maintenir le ratio d'aspect d'un élément sensible, en utilisant des unités de remplissage et vw:
(pour une solution complète pour une grille réactive des carrés, vous pouvez voir cette réponse )

Utilisation des unités vw

Vous pouvez utiliser des unités de vw pour faire vos éléments carrés et réactif ( unités de fenêtres sur MDN).
1vw = 1% of viewport width de sorte que vous pouvez régler la hauteur des éléments en fonction de la largeur de la fenêtre.
Exemple d'une grille de 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 réalisé le dimensionnement de l'élément accoring à la hauteur de la fenêtre usin unités vh.

---

Utilisation padding

Rembourrage est calculé en fonction des conteneurs largeur de sorte que vous pouvez l'utiliser pour régler la hauteur du bloc en fonction de la largeur de lui.
Exemple d'une grille de 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>

Answer 3

Pour faire un div un carré est assez facile 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 redimensionnez la fenêtre.

.

.

Vous pouvez le faire avec un rapport de côté que vous voulez, si vous voulez que la boîte soit 16: 9 vous calculez:

9/16 = 0,56

qui vous puis multiplier par la largeur de l'élément (dans ce cas 50% (= 0,5)), donc:

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

Answer 4

La solution ci-dessus ne préserve pas la zone - celui-ci est mieux

        //@param {jQuery} div 
        function makeSquare(div){
            //make it square !
            var oldDimens = {
                h : div.height(),
                w : div.width()
            };
            var area = oldDimens.h * oldDimens.w;
            var l = Math.sqrt(area);
            div.height(l).width(l);
        }