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é.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35197{{"Ajuster une image à l'intérieur d'un conteneur"}} css/colors -.-> lab-35197{{"Ajuster une image à l'intérieur d'un conteneur"}} css/borders -.-> lab-35197{{"Ajuster une image à l'intérieur d'un conteneur"}} css/width_and_height -.-> lab-35197{{"Ajuster une image à l'intérieur d'un conteneur"}} css/positioning -.-> lab-35197{{"Ajuster une image à l'intérieur d'un conteneur"}} css/backgrounds -.-> lab-35197{{"Ajuster une image à l'intérieur d'un conteneur"}} end

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.