Wie man die Blockhöhe gleich der CSS-Breite macht: Ein detaillierter Leitfaden für Versteller

Das Layout einer Webseite ist ein komplexer und wichtiger Prozess, bei dem der Entwickler die grundlegenden Prinzipien von CSS kennen und verstehen muss. Eine der häufigsten Aufgaben beim Layout besteht darin, die Höhe des Blocks auf seine Breite einzustellen. In diesem Artikel werden wir uns verschiedene Möglichkeiten ansehen, um ein solches Ergebnis zu erzielen.

Methode Nummer eins: verwenden eines Pseudoelements ::before.

Um die Höhe des Blocks gleich seiner Breite festzulegen, verwenden Sie das Pseudoelement ::before. Fügen Sie es dem gewünschten Block hinzu und legen Sie die folgenden CSS-Eigenschaften fest:

Hier padding-top: 100% es spielt die Rolle einer Schlüsseleigenschaft, mit der Sie die Höhe des Blocks auf seine Breite einstellen können. Das Pseudoelement nimmt die gesamte Blockbreite und Höhe ein, die dieser Breite entspricht, wodurch wir den gewünschten Anteil festlegen können.

Methode Nummer zwei: verwenden eines Pseudoelements ::before und Positionierung.

Für eine flexiblere und präzisere Positionierung eines Blocks, der der Breite entspricht, können Sie die folgenden CSS-Eigenschaften verwenden:

Hier, indem Sie eine Eigenschaft hinzufügen position: relative pseudo-Element ::before, wir können die Inneneinheit genau positionieren .container. Wenn wir ihm die Breite und Höhe von 100% geben, erhalten wir einen Block, dessen Höhe gleich seiner Breite ist, und können frei mit seinem Inhalt arbeiten.

Daher haben wir uns mit zwei Methoden vertraut gemacht, um die Höhe des Blocks gleich seiner Breite einzustellen. Wenn Sie die für Ihr Projekt geeignete Option auswählen und die vorgeschlagenen CSS-Eigenschaften anwenden, können Sie dieses Problem effektiv und mühelos lösen.

Nachteile von Standardmethoden

Wenn Sie jemals versucht haben, die Höhe eines Blocks mit Standard-CSS-Methoden gleich seiner Breite zu machen, sind Sie wahrscheinlich auf einige Nachteile gestoßen. Hier sind einige von ihnen:

1. Inhaltseinschränkung:

Selbst wenn Sie die Breite eines Elements als Prozentsatz festlegen, wird seine Höhe immer automatisch entsprechend seinem Inhalt berechnet. Dies kann dazu führen, dass die Höhe des Elements nicht mit seiner Breite übereinstimmt.

2. Negative Folgen für Unterschriften:

Wenn Sie Standardmethoden verwenden, um die Höhe eines Blocks gleich seiner Breite zu machen, kann es zu einem Problem kommen, wenn Ihre neben dem Block liegende Signatur ihre Position ändert oder einen Teil des Inhalts des Blocks überlappt.

3. Abhängigkeit vom Inhalt:

Ein weiterer Nachteil bei der Verwendung von Standardmethoden besteht darin, dass sie auf dem Inhalt des Blocks basieren. Wenn sich der Inhalt des Blocks ändert oder vergrößert, ändert sich auch die Höhe des Blocks, was das Design der Seite beeinträchtigen kann.

Anwenden der Eigenschaft "padding-bottom"

Legen Sie zunächst die Standardwerte für Breite und Höhe für den Block fest. Zum Beispiel:

.my-block width: 200px;
height: 200px;
>

Um die Höhe des Blocks nun gleich seiner Breite zu machen, fügen wir ihm die Eigenschaft "padding-bottom" hinzu und geben den Wert als Prozentsatz an. Dieser Prozentsatz entspricht dem Verhältnis der Breite des Blocks zur Höhe des Blocks.

.my-block width: 200px;
height: 200px;
padding-bottom: 100%;
>

Die Höhe des Blocks wird nun automatisch basierend auf der angegebenen Breite berechnet. Der Wert der Eigenschaft "padding-bottom" von 100% bedeutet, dass der Einzug von unten 100% der Breite des Blocks beträgt.

Sie können die Eigenschaft "padding-bottom" auch mit anderen Eigenschaften kombinieren, z. B. indem Sie einem Block interne Einrückungen hinzufügen, indem Sie Werte für die Eigenschaften "padding-top", "padding-right" und "padding-left" festlegen.

Die Verwendung der Eigenschaft "padding-bottom" macht es daher einfach und flexibel, die Blockhöhe auf die Breite des Blocks einzustellen, ohne dass JavaScript oder andere komplexe technische Lösungen erforderlich sind.

Wie funktioniert die Eigenschaft "padding-bottom"

Mit der Eigenschaft "padding-bottom" können Sie die Einrückung innerhalb eines Elements vom unteren Rand des Elements festlegen. Es ermöglicht Ihnen, den leeren Raum unter dem Inhalt eines Elements zu steuern.

Der Wert der Eigenschaft "padding-bottom" wird in Pixeln (px), Prozentsätzen (%) oder anderen verfügbaren Einheiten angegeben. Zum Beispiel:

padding-bottom: 20px;

padding-bottom: 10%;

padding-bottom: 2em;

Die Eigenschaft "padding-bottom" kann nützlich sein, wenn Sie einen Einzug unter einem Element erstellen möchten, um es von anderen Elementen zu trennen oder einen Platz für den Hintergrund oder den Rahmen festzulegen.

Wenn Sie die gleiche Blockhöhe und -breite festlegen möchten, können Sie die Eigenschaft "padding-bottom" mit einem Prozentwert verwenden, z. B.:

padding-bottom: 50%;

background-color: red;

In diesem Beispiel hat der Block eine Breite und eine Höhe von 50% der Breite des übergeordneten Elements. Mit der Eigenschaft "padding-bottom" können Sie jedoch je nach gewünschtem Ergebnis andere Proportionen festlegen.

Verwenden von Pseudoelementen

Eine der beliebtesten Methoden zur Verwendung von Pseudoelementen zum Festlegen der Blockhöhe auf die Breite eines Blocks besteht darin, das Pseudoelement "Inhalt" mit der Pseudoklasse ::before oder ::after hinzuzufügen.

Um ein Pseudoelement zu verwenden, müssen Sie den Block auswählen, dem Sie die Höhe hinzufügen möchten, indem Sie einen CSS-Selektor wie eine Klasse oder eine ID verwenden. Verwenden Sie dann die Pseudoklasse ::before oder ::after, um Stile hinzuzufügen und die gewünschte Höhe und Breite festzulegen.

In diesem Beispiel legen wir einen Klassencontainer fest .der container ist 200 Pixel breit und hat eine Höhe von Null, und mit dem Pseudo-Element ::before fügen wir einen zusätzlichen Block mit einer Höhe hinzu, die der Breite des Containers entspricht.

Verwenden der relativen Positionierung ( position): relative ) Für den Container und das Festlegen der Höhe auf Null unter Verwendung des inneren Einrückens ( padding-bottom: 100% ) erstellen wir einen proportionalen Raum für das Pseudoelement.

Pseudoelemente können zusätzlich mit anderen CSS-Eigenschaften gestylt werden, z. B. Hintergrund, Strich, Inhalt usw.

Die Verwendung von Pseudoelementen ist eine flexible und bequeme Möglichkeit, eine Blockhöhe gleich ihrer Breite festzulegen. Diese Methode vermeidet die Notwendigkeit, die HTML-Struktur zu ändern, und ermöglicht es Ihnen, die Blockgrößen bei Bedarf einfach zu ändern.