LabEx
LoginBeitreten

Responsives Container mit Seitenverhältnis in CSS

Beginner

This tutorial is from open-source community. Access the source code

Einführung

In diesem Lab werden wir lernen, wie man mithilfe von CSS einen responsiven Container mit einem bestimmten Seitenverhältnis erstellt. Wir werden uns mit der benutzerdefinierten Eigenschaft --aspect-ratio und der Verwendung der calc()-Funktion zur Berechnung der Höhe des Containers vertraut machen. Außerdem werden wir lernen, wie man das Kindelement so einstellt, dass es das Seitenverhältnis beibehält, indem man die Eigenschaft object-fit: cover verwendet. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie man auf Ihren Webseiten visuell ansprechende und responsive Container erstellt.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 96% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Seitenverhältnis

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

Dieser Code erstellt mithilfe von CSS-Benutzerdefinieigenschaften und der calc()-Funktion einen responsiven Container mit einem bestimmten Seitenverhältnis. Folgen Sie diesen Schritten, um dies zu erreichen:

  1. Definieren Sie das gewünschte Seitenverhältnis mithilfe einer CSS-Benutzerdefinieigenschaft, --aspect-ratio.
  2. Legen Sie die position-Eigenschaft des Container-Elements auf relative und seine height-Eigenschaft auf 0 fest.
  3. Berechnen Sie die Höhe des Container-Elements mithilfe der calc()-Funktion und der --aspect-ratio-Benutzerdefinieigenschaft und legen Sie sie als padding-bottom-Eigenschaft fest.
  4. Legen Sie das direkte Kind des Container-Elements auf position: absolute, top: 0, left: 0, width: 100% und height: 100% fest.
  5. Halten Sie das Seitenverhältnis des Kind-Elements bei, indem Sie seine object-fit-Eigenschaft auf cover setzen.

Verwenden Sie den folgenden HTML- und CSS-Code, um den Container zu erstellen:

<div class="container">
  <img src="https://picsum.photos/id/119/800/450" />
</div>

.container {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100% / var(--aspect-ratio));
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', 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 Seitenverhältnis-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.