Zentrieren eines DIV, das das Aspektverhältnis beibehält, wenn der Körperrand der Körper ist

Diese CSS -Herausforderung beinhaltet die Erstellung eines DIV mit spezifischen Eigenschaften: vertikaler und horizontaler Zentrieren, Ansichtsfenster mit den Rändern, die Aufrechterhaltung eines festen Seitenverhältnisses und alles ohne JavaScript. Es werden mehrere Lösungen vorgestellt:

Die Herausforderung, wie von Andrew Welch beschrieben, erfordert:

• Zentrieren: sowohl vertikal als auch horizontal.
• Skalierung: Die DIV sollte die Größenänderung für das Ansichtsfenster beibehalten und gleichzeitig einen Vorsprung beibehalten.
• Seitenverhältnis: Ein willkürliches Seitenverhältnis muss erhalten bleiben.
• Kein JavaScript: Die Lösung darf nur CSS verwenden.

Mehrere Entwickler boten Lösungen an, darunter:

• Mark Huot: Verwendete Berechnungen der direkten Breite/Höhen- und Seitenverhältnis, um die Ränder zu bestimmen.
• Amelia Wassberger & Eric A. Meyer: Angestellte Ansichtsfenster (VH/VW) für Höhe/Breite und Max-Höhe/Max-Breite, die sich mit translate (Amelia) oder Flexbox (ERIC) konzentrieren.
• Brian Hart & Benoît Rouleau: Verwendete vmin -Einheiten zur Größe des Seitenverhältnisses und zentriert mit Flexbox. Benoît verwendete calc() für Randanpassungen.
• Jonathan Melville: präsentierte eine Lösung, die hauptsächlich mit den CSS -Klassen von Tailwind verwendet wird.

Andrew Welch bevorzugte letztendlich eine Lösung unter Verwendung vmin -Einheiten, obwohl er anerkennt, dass seine Verwendung von calc() für die Margensubtraktion möglicherweise nicht erforderlich sein könnte. Die verschiedenen Ansätze unterstreichen die Flexibilität von CSS bei der Bekämpfung dieses Layoutproblems.

Das obige ist der detaillierte Inhalt vonZentrieren eines DIV, das das Aspektverhältnis beibehält, wenn der Körperrand der Körper ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!