Voici quelques titres potentiels pour votre article, en mettant l’accent sur le format questions-réponses : * Puis-je créer une division carrée de taille dynamique qui préserve les proportions et les centres dans la fenêtre ? *

Conserver les proportions en fonction de la largeur et de la hauteur

Un div carré peut-il s'adapter et se centrer de manière dynamique dans la fenêtre tout en préservant ses proportions en fonction de la largeur et de la hauteur ?

Exigences :

• Solution CSS uniquement
• La taille du carré s'ajuste automatiquement à la fenêtre d'affichage. dimension minimale.
• Le carré est centré à la fois horizontalement et verticalement.

Solution :

La propriété de rapport d'aspect (2022 )

Pour atteindre notre objectif, utilisez la propriété aspect-ratio (référence MDN). Cet outil remarquable nous permet de spécifier le rapport largeur/hauteur, garantissant ainsi le maintien de l'aspect souhaité.

Maintien du rapport hauteur/largeur en fonction de la taille de la fenêtre d'affichage (largeur et hauteur) :

<code class="css">.ar-1-1 {
  aspect-ratio: 1 / 1;
  background: orange;
}

.ar-1-19 {
  aspect-ratio: 16 / 9;
  background: pink;
}

div {
  max-width: 100vw;
  max-height: 100vh;
  margin-bottom: 5vh;
}

/* For the demo */

body {
  margin: 0;
}</code>

<code class="html"><div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div></code>

Dans cet exemple :

• Les divs de classe ar-1-1 conservent un rapport hauteur/largeur de 1:1.
• Les divs de classe ar-1- 19 conservent un rapport hauteur/largeur de 16:9.
• Tous les div ajustent dynamiquement leur taille en fonction des dimensions de la fenêtre d'affichage, garantissant ainsi un centrage correct.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!