Comment conserver le ratio d'aspect

Apprendre à utiliser CSS pour conserver le ratio d'aspect des éléments.

Comment réaliser - Hauteur égale à la largeur

Première étape - Ajoutez HTML :

Utilisez des éléments de conteneur, par exemple <div>，si vous souhaitez qu'il contienne du texte, ajoutez un élément enfant :

<div class="container">
  <div class="text">Some text</div> <!-- Si vous souhaitez que le conteneur contienne du texte -->
</div>

Deuxième étape - Ajoutez CSS :

pour padding-top Ajoutez des pourcentages pour maintenir le ratio d'aspect du DIV. L'exemple suivant créera un DIV d'un ratio d'aspect 1:1 (hauteur et largeur toujours égales) :

Exemple - Ratio d'aspect 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Ratio d'aspect 1:1 */
  position: relative; /* Si vous souhaitez que l'intérieur contienne du texte */
}
/* Si vous souhaitez que le conteneur contienne du texte */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Essayez-le vous-même

Autres ratios d'aspect

Exemple - Ratio d'aspect 16:9

.container {
  padding-top: 56.25%; /* Ratio d'aspect 16:9 (9 divisé par 16 égale 0.5625) */
}

Essayez-le vous-même

Exemple - Ratio d'aspect 4:3

.container {
  padding-top: 75%; /* Ratio d'aspect 4:3 (3 divisé par 4 égale 0.75) */
}

Essayez-le vous-même

Exemple - Ratio d'aspect 3:2

.container {
  padding-top: 66.66%; /* Ratio d'aspect 3:2 (2 divisé par 3 égale 0.6666) */
}

Essayez-le vous-même

Exemple - Ratio d'aspect 8:5

.container {
  padding-top: 62.5%; /* Ratio d'aspect 8:5 (5 divisé par 8 égale 0.625) */
}

Essayez-le vous-même

Propriété aspect-ratio de CSS

Dans les navigateurs plus récents, vous pouvez utiliser simplement CSS aspect-ratio Propriété :

Exemple - Ratio d'aspect 3:2

.container {
  aspect-ratio: 3 / 2;
}

Essayez-le vous-même

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cette propriété.