Comment créer une division carrée réactive avec rapport hauteur/largeur et centrage ?

Maintenir les proportions en fonction des dimensions de la fenêtre

Pour obtenir un div carré réactif qui conserve ses proportions en fonction de la largeur et de la hauteur de la fenêtre, tirez parti Propriété de rapport d'aspect de CSS.

Exigences :

• CSS pur
• Square s'adapte à la dimension minimale de la fenêtre, quelle que soit l'orientation
• Centrage horizontal et vertical dans la fenêtre

La solution aspect-ratio

La propriété aspect-ratio vous permet de spécifier le rapport hauteur/largeur souhaité. Par défaut, la propriété définit la hauteur par rapport à la largeur. Par conséquent, un rapport hauteur/largeur de 1/1 crée un carré.

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

Adaptation aux dimensions de la fenêtre

Pour vous assurer que votre div carré s'adapte à la dimension minimale de la fenêtre :

<code class="css">div {
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;  /* For centering */
}</code>

Centrage vertical et horizontal

Le centrage du carré nécessite de définir la marge sur automatiquement à la fois verticalement et horizontalement :

<code class="css">div {
  ...
  margin: 0 auto;
}</code>

Exemple

<code class="html"><div class="square">Aspect ratio 1:1</div></code>

Conclusion

En utilisant le rapport hauteur/largeur, vous pouvez créer des divs carrés réactifs qui conservent leur rapport hauteur/largeur et sont centrés dans la fenêtre d'affichage, garantissant ainsi un expérience visuelle cohérente quelles que soient les dimensions ou l'orientation de la fenêtre.

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!