Ajuster une image à l'intérieur d'un conteneur

Introduction

Dans ce laboratoire, nous allons apprendre à utiliser CSS pour adapter et positionner des images à l'intérieur de leurs conteneurs tout en conservant leur rapport de largeur à hauteur. Nous allons explorer les propriétés object-fit et object-position et comment elles peuvent être utilisées pour obtenir différents résultats. À la fin de ce laboratoire, vous serez capable de créer des images visuellement attrayantes qui s'adaptent parfaitement à leur espace désigné.

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 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Ajuster une image à l'intérieur d'un conteneur

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

Pour ajuster une image à l'intérieur de son conteneur tout en conservant son rapport de largeur à hauteur, vous pouvez utiliser object-fit: contain. Pour remplir le conteneur avec l'image tout en conservant son rapport de largeur à hauteur, utilisez object-fit: cover. Si vous voulez positionner l'image au centre du conteneur, vous pouvez utiliser object-position: center.

Voici un exemple de manière dont vous pouvez utiliser ces propriétés :

<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />

Et le CSS correspondant :

.image {
  background: #34495e;
  border: 1px solid #34495e;
  width: 200px;
  height: 200px;
}

.image-contain {
  object-fit: contain;
  object-position: center;
}

.image-cover {
  object-fit: cover;
  object-position: right top;
}

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 Ajuster une image à l'intérieur d'un conteneur. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.