Wie kann ich das Seitenverhältnis von Elementen nur mit CSS beibehalten?

Beibehalten des Seitenverhältnisses von Elementen mit CSS: Min. Breite aus Höhe

Das Festlegen der Mindestbreite von Elementen entsprechend ihrer Höhe kann eine Herausforderung sein wenn die Höhe nicht explizit definiert ist. Während die Verwendung von jQuery eine Lösung bietet, ist es möglich, dieses Verhalten direkt in CSS zu erreichen.

Um das Seitenverhältnis beizubehalten, nutzen Sie das Konzept des „ersetzten Elements“. Ein Bild () ist ein Paradebeispiel. Durch Festlegen der Höhe bleibt das intrinsische Seitenverhältnis erhalten und die Breite wird automatisch entsprechend angepasst.

Implementierung der CSS-Lösung

Erstellen Sie einen „Container“ mit einer gewünschten Beliebigkeit Geben Sie die Höhe ein und setzen Sie deren Position auf „relativ“. Fügen Sie im Container ein Bild mit einer Höhe von 100 % hinzu. Dadurch wird die Breite des Bildes automatisch proportional eingestellt.

Verschachteln Sie ein „Inhalts“-Element mit absoluter Positionierung, um den gesamten Raum des Containers einzunehmen, ohne seine Abmessungen zu beeinflussen.

Seitenverhältnissteuerung

Um das Seitenverhältnis anzupassen, variieren Sie die Höhe des Bildes. Beispielsweise erfordert ein Verhältnis von 4:3 die Einstellung der Bildhöhe auf 133 %.

Zusätzliche Überlegungen

Das in der Lösung verwendete transparente 1x1-Pixel-GIF kann durch ersetzt werden andere Elemente, wie zum Beispiel eine Leinwand oder SVG. Wenn das Originalbild kein Seitenverhältnis von 1:1 hat, müssen die Höhenwerte angepasst werden.

Informationen zum Festlegen der Elementhöhe basierend auf der Breite finden Sie unter „Beibehalten des Seitenverhältnisses eines Div mit CSS“. Ressource.

Das obige ist der detaillierte Inhalt vonWie kann ich das Seitenverhältnis von Elementen nur mit CSS beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!