Bild in Container anpassen

Einführung

In diesem Lab werden wir lernen, wie man CSS verwendet, um Bilder in ihren Containern anzupassen und zu positionieren, während das Seitenverhältnis beibehalten wird. Wir werden die Eigenschaften object-fit und object-position erkunden und wie sie verwendet werden können, um verschiedene Ergebnisse zu erzielen. Am Ende dieses Labs werden Sie in der Lage sein, visuell ansprechende Bilder zu erstellen, die perfekt in ihrem vorgesehenen Raum passen.

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{{"Bild in Container anpassen"}} css/colors -.-> lab-35197{{"Bild in Container anpassen"}} css/borders -.-> lab-35197{{"Bild in Container anpassen"}} css/width_and_height -.-> lab-35197{{"Bild in Container anpassen"}} css/positioning -.-> lab-35197{{"Bild in Container anpassen"}} css/backgrounds -.-> lab-35197{{"Bild in Container anpassen"}} end

Bild in Container anpassen

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein Bild in seinem Container anzupassen, während das Seitenverhältnis beibehalten wird, können Sie object-fit: contain verwenden. Um den Container mit dem Bild zu füllen, während das Seitenverhältnis beibehalten wird, verwenden Sie object-fit: cover. Wenn Sie das Bild in der Mitte des Containers positionieren möchten, können Sie object-position: center verwenden.

Hier ist ein Beispiel, wie Sie diese Eigenschaften verwenden können:

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

Und die entsprechende CSS:

.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;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Bild in Container anpassen" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.