Comment Maintenir le Rapport d'Aspect Avec CSS

Très souvent, les développeurs souhaitent créer un élément div, capable de modifier sa largeur / hauteur en fonction de la largeur de la fenêtre. Cela peut être fait en maintenant les proportions de l’élément. Tout d’abord, voyons quel est le rapport d'aspect (aspect ratio)?

Le rapport d'aspect est un attribut de projection d’image qui décrit la relation proportionnelle entre la largeur d’une image et sa hauteur. Les rapports d'aspect vidéo courants sont 4:3 (format vidéo universel du XXe siècle) et 16:9 (universel pour la télévision HD et télévision numérique européenne).

Dans cet extrait, nous allons apprendre à conserver les proportions d'un élément en utilisant uniquement CSS.

1. Ajoutez jHTML

Vous devez utiliser un élément qui servira de conteneur, tout comme l'élément <div>. Si vous voulez avoir un texte à l'intérieur, vous devez également ajouter un élément enfant.

Exemple

<div class="container">
  <div class="text">
    Quelque texte
    <!-- Vous pouvez placer votre texte ici -->
  </div>
</div>

2. Ajoutez CSS

Si vous souhaitez conserver les proportions de votre div, vous devez ajouter une valeur en pourcentage pour la propriété padding-top, comme cela:

element {
  padding-top: %value;
}

Différents rapports d'aspect ont différentes valeurs de pourcentage.

Certains d'entre elles sont présentés ici:

Rapport d'aspect Valeur de padding-top
1:1 100%
16:9 56.25%
4:3 75%
3:2 66.66%
8:5 62.5%

Premièrement, nous examinerons les deux exemples de ratio d’aspect les plus courants. Commençons par le format 4:3. Voici à quoi ressemble le code:

.container {
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 75%; /* 4:3 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2>Aspect Ratio 4:3</h2>
    <p>Redimensionnez la fenêtre pour voir l'effet.</p>
    <div class="container">
      <div class="text">4:3 Aspect ratio</div>
    </div>
  </body>
</html>

Voyons maintenant un exemple du deuxième rapport d'aspect le plus utilisé, à savoir 16:9. Voici le code:

.container {
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2>Aspect Ratio 16:9</h2>
    <p>Resize the window to see the effect.</p>
    <div class="container">
      <div class="text">16:9 Aspect ratio</div>
    </div>
  </body>
</html>

Voyons maintenant quelques autres exemples de rapport d'aspect.

1:1 Aspect Ratio

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 100%; /* 1:1 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2>Aspect Ratio 1:1</h2>
    <p>Redimensionnez la fenêtre pour voir l'effet.</p>
    <div class="container">
      <div class="text">1:1 Aspect ratio</div>
    </div>
  </body>
</html>

3:2 Aspect Ratio

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 66.66%; /* 3:2 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2>Aspect Ratio 3:2</h2>
    <p>Redimensionnez la fenêtre pour voir l'effet.</p>
    <div class="container">
      <div class="text">3:2 Aspect ratio</div>
    </div>
  </body>
</html>

8:5 Aspect Ratio

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      .container {
        background-color: green;
        position: relative;
        width: 100%;
        padding-top: 62.5%; /* 8:5 Aspect Ratio */
      }
      .text {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        font-size: 25px;
        color: black;
      }
    </style>
  </head>
  <body>
    <h2>Aspect Ratio 8:5</h2>
    <p>Redimensionnez la fenêtre pour voir l'effet.</p>
    <div class="container">
      <div class="text">8:5 Aspect ratio</div>
    </div>
  </body>
</html>

Et pour la fin nous avons un petit tour. :) La padding-top, lorsqu'il est défini sur un pourcentage, est (quelque peu contre-intuitif) par rapport à la width du bloc contenant et nous pouvons l'utiliser à notre avantage. Nous pouvons conserver les proportions d'un bloc dans une https://fr.w3docs.com/apprendre-css/after.html://www.w3docs.com/learn-css/after.html">::after. Par exemple, supposons qu'un bloc ait initialement une largeur de 300 pixels et une hauteur de 150 pixels, et si le dessin le pousse à être plus petit (une règle sensible par exemple) qu'il garde le même ratio qu'auparavant.

Voici comment nous pouvons le faire:

.same-ratio {
  position: relative;
  /* nous allons définir la largeur de réponse ici */
  width: 100%;
  max-width: 300px;
}
.same-ratio::after {
  content: "";
  display: block;
  /* quelle est la hauteur par rapport à la largeur (%) */
  padding-top: 50%;
}
/* Tout contenu doit positionner de manière absolue pour ne pas interférer avec le ratio*/
.same-ratio-content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}