Comment conserver les proportions et centrer une division à l'aide de CSS ?

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

S'assurer qu'un div conserve ses proportions est essentiel pour une conception réactive. Cela garantit que les proportions de l'élément restent cohérentes quelles que soient ses dimensions ou son orientation.

Pour y parvenir en utilisant uniquement CSS, nous pouvons exploiter la propriété moderne aspect-ratio.

Aspect -Propriété Ratio

La propriété aspect-ratio spécifie le rapport largeur/hauteur d'un élément. Par exemple, une valeur de 1/1 créerait un carré, tandis que 16/9 créerait un rectangle avec le même rapport hauteur/largeur qu'un écran 16:9.

Centrer la division horizontalement et verticalement

Pour centrer un élément horizontalement et verticalement au sein de son parent, nous pouvons utiliser les propriétés CSS suivantes :

margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Exemple Code

En combinant les propriétés de rapport d'aspect et de centrage, nous pouvons créer un div carré qui conserve son rapport d'aspect tout en étant centré dans la fenêtre :

.ar-1-1 {
  aspect-ratio: 1 / 1;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

Ce code créera un div carré qui occupe toute la fenêtre d'affichage, tout en conservant un rapport hauteur/largeur de 1:1. Le div sera également centré horizontalement et verticalement dans la fenêtre.

Notes supplémentaires

• La propriété aspect-ratio n'est pas encore prise en charge dans tous les navigateurs, mais l'est dans les navigateurs modernes. comme Chrome, Firefox et Safari.
• Pour garantir la compatibilité avec les anciens navigateurs, vous pouvez utiliser des polyfills comme [picturefill](https://github.com/scottjehl/picturefill) ou [respond.js](https://github.com/scottjehl/Respond).

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!