Wie kann ich mithilfe von CSS die Breite eines Elements proportional zu seiner Höhe festlegen?

Anpassen der Elementbreite anhand der Höhe mithilfe von CSS

Das Festlegen der Elementbreite anhand der Höhe kann über jQuery erreicht werden, wie in der ursprünglichen Frage erwähnt. Dieser Prozess kann jedoch mithilfe von CSS optimiert werden.

Um dies zu erreichen, nutzen Sie das Konzept ersetzter Elemente wie . Diese Elemente passen ihre Breite von Natur aus an, um ihr Seitenverhältnis beizubehalten, wenn nur die Höhe angegeben wird.

Betrachten Sie das folgende Beispiel:

.container {
  position: relative;
  display: inline-block;
  height: 50vh;
}

.container > img {
  height: 100%;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Die Höhe des .container-Elements bestimmt die Mindestbreite. Das transparente Mit einem Seitenverhältnis von 1:1 wird sichergestellt, dass die Breite von .container und seinem untergeordneten .contents-Element immer proportional zu seiner Höhe ist.

Um alternativ ein Seitenverhältnis von 4:3 für .contents beizubehalten, legen Sie die Bilder fest Höhe auf 133 %. Mit einer oder ist auch machbar.

Für Situationen, in denen die Elementhöhe basierend auf der Breite angepasst werden sollte, lesen Sie die Anleitung zur Beibehaltung von Seitenverhältnissen mithilfe von CSS.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS die Breite eines Elements proportional zu seiner Höhe festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!