Konstantes Verhältnis von Breite zu Höhe: Responsive Design Techniken

Einführung

In diesem Lab werden wir untersuchen, wie man für Elemente mit variierender Breite ein konstantes Verhältnis von Breite zu Höhe erstellt. Indem wir die padding-top-Eigenschaft auf einem ::before-Pseudo-Element verwenden, können wir gewährleisten, dass die Höhe des Elements proportional zu seiner Breite bleibt. Diese Technik kann verwendet werden, um responsive Quadrate und andere Formen mit bestimmten Seitenverhältnissen zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35183{{"Konstantes Verhältnis von Breite zu Höhe"}} css/colors -.-> lab-35183{{"Konstantes Verhältnis von Breite zu Höhe"}} css/width_and_height -.-> lab-35183{{"Konstantes Verhältnis von Breite zu Höhe"}} css/display_property -.-> lab-35183{{"Konstantes Verhältnis von Breite zu Höhe"}} css/backgrounds -.-> lab-35183{{"Konstantes Verhältnis von Breite zu Höhe"}} css/pseudo_elements -.-> lab-35183{{"Konstantes Verhältnis von Breite zu Höhe"}} end

Konstantes Verhältnis von Breite zu Höhe

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

Dieser Codeausschnitt gewährleistet, dass ein Element mit variabler width einen proportionalen height-Wert behält. Um dies zu erreichen, wenden Sie padding-top auf das ::before-Pseudo-Element an, sodass die height des Elements einem bestimmten Prozentsatz seiner width entspricht. Das Verhältnis von height zu width kann nach Bedarf geändert werden. Beispielsweise wird ein padding-top von 100% ein responsives Quadrat mit einem 1:1-Verhältnis erzeugen. Um diesen Code zu verwenden, fügen Sie einfach folgenden HTML-Code hinzu:

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

Dann fügen Sie folgenden CSS-Code hinzu:

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

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 Lab zu Konstantem Verhältnis von Breite zu Höhe abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.