Rapport constant largeur/hauteur : Techniques de conception responsive

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer un rapport largeur/hauteur constant pour des éléments de largeurs variables. En utilisant la propriété padding-top sur un pseudo-élément ::before, nous pouvons nous assurer que la hauteur de l'élément reste proportionnelle à sa largeur. Cette technique peut être utilisée pour créer des carrés réactifs et d'autres formes avec des rapports spécifiques.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 97%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Rapport constant largeur/hauteur

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Ce fragment de code assure qu'un élément avec une largeur variable conservera une valeur hauteur proportionnelle. Pour y arriver, appliquez padding-top sur le pseudo-élément ::before, rendant la hauteur de l'élément égale à un pourcentage de sa largeur. La proportion de hauteur à largeur peut être modifiée selon les besoins. Par exemple, un padding-top de 100% créera un carré réactif avec un rapport 1:1. Pour utiliser ce code, ajoutez simplement le code HTML suivant :

<div class="constant-width-to-height-ratio"></div>

Ensuite, ajoutez le code CSS suivant :

.constant-width-to-height-ratio {
  background: #9c27b0;
  width: 50%;
}

.constant-width-to-height-ratio::before {
  content: "";
  padding-top: 100%;
  float: left;
}

.constant-width-to-height-ratio::after {
  content: "";
  display: block;
  clear: both;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Rapport constant largeur/hauteur. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.