Wie gestaltet man ein Div als Responsive Square?

Ein Div als Responsive Square gestalten

Es kann möglich sein, ein Div-Element zu erhalten, das seine Höhe automatisch an seine Breite anpasst und dabei das Seitenverhältnis beibehält eine häufige Styling-Herausforderung. Hier ist eine detaillierte Erklärung und Lösung:

CSS-Methodik

Um ein responsives quadratisches Div zu erstellen, können wir die CSS-Eigenschaft „padding-bottom“ und die Einheit „%“ verwenden. ". Diese Methode stellt sicher, dass die Höhe des Div proportional zu seiner Breite bleibt. Indem wir den padding-bottom auf den gleichen Prozentwert wie die Breite einstellen, erstellen wir effektiv einen quadratischen Container.

HTML- und CSS-Code

Hier ist der HTML- und CSS-Code, der etwas leistet Dies:

<div>

#square {
  height: 0;
  width: 20%;
  padding-bottom: 20%;
  background-color: red;
}

Erläuterung

• Die Eigenschaft „height“ ist auf 0 gesetzt, sodass der padding-bottom die Höhe steuern kann.
• Die Eigenschaft „width“ ist auf 20 % festgelegt und definiert die prozentuale Breite des div.
• Die Eigenschaft „padding-bottom“ wird ebenfalls auf 20 % gesetzt, wodurch ein quadratisches Div erstellt wird.

Wenn sich die Breite des übergeordneten Containers ändert, behält das Div seine Breite bei Seitenverhältnis und passt seine Höhe automatisch an das neue an Breite.

Kompatibilität

Diese Lösung funktioniert effektiv auf verschiedenen Browsern, einschließlich Firefox, Chrome, Edge und Safari.

Das obige ist der detaillierte Inhalt vonWie gestaltet man ein Div als Responsive Square?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!