Wie behalte ich das Seitenverhältnis bei und zentriere ein Div mithilfe von CSS?

Beibehalten des Seitenverhältnisses entsprechend der Breite und Höhe

Die Sicherstellung, dass ein Div sein Seitenverhältnis beibehält, ist für responsives Design von entscheidender Bedeutung. Dadurch wird sichergestellt, dass die Proportionen des Elements unabhängig von seinen Abmessungen oder seiner Ausrichtung konsistent bleiben.

Um dies nur mit CSS zu erreichen, können wir die moderne Eigenschaft aspect-ratio nutzen.

Aspect -Ratio-Eigenschaft

Die Aspect-Ratio-Eigenschaft gibt das Breite-zu-Höhe-Verhältnis eines Elements an. Beispielsweise würde ein Wert von 1/1 ein Quadrat erzeugen, während 16/9 ein Rechteck mit dem gleichen Seitenverhältnis wie ein 16:9-Display erzeugen würde.

Div horizontal und vertikal zentrieren

Um ein Element innerhalb seines übergeordneten Elements horizontal und vertikal zu zentrieren, können wir die folgenden CSS-Eigenschaften verwenden:

margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Beispielcode

Durch die Kombination der Seitenverhältnis- und Zentrierungseigenschaften können wir ein erstellen Quadratisches Div, das sein Seitenverhältnis beibehält und gleichzeitig im Ansichtsfenster zentriert ist:

.ar-1-1 {
  aspect-ratio: 1 / 1;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

Dieser Code erstellt ein quadratisches Div, das das gesamte Ansichtsfenster einnimmt und dabei ein Seitenverhältnis von 1:1 beibehält. Das Div wird außerdem sowohl horizontal als auch vertikal im Ansichtsfenster zentriert.

Zusätzliche Hinweise

• Die Eigenschaft „Seitenverhältnis“ wird noch nicht in allen Browsern unterstützt, wird aber in modernen Browsern unterstützt wie Chrome, Firefox und Safari.
• Um die Kompatibilität mit älteren Browsern sicherzustellen, können Sie Polyfills wie [picturefill](https://github.com/scottjehl/picturefill) oder [respond.js](https ://github.com/scottjehl/Respond).

Das obige ist der detaillierte Inhalt vonWie behalte ich das Seitenverhältnis bei und zentriere ein Div mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!