Hoe je de aspectverhouding behoudt

Leer hoe je de aspectverhouding van elementen met CSS kunt behouden.

Hoe te bereiken - Hoogte gelijk aan breedte

Stap 1 - Voeg HTML toe:

Gebruik container-elementen zoals <div>，als je tekst in deze wilt opnemen, voeg een sub-element toe:

<div class="container">
  <div class="text">Some text</div> <!-- Als je tekst in de container wilt -->
</div>

Stap 2 - Voeg CSS toe:

voor padding-top Voeg procentwaarden toe om de breedte-hoogteratio van de DIV te behouden. Het volgende voorbeeld zal een DIV met een breedte-hoogteratio van 1:1 creëren (hoogte en breedte zijn altijd gelijk):

Voorbeeld - Breedte-hoogteratio 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Breedte-hoogteratio 1:1 */
  position: relative; /* Als je interne tekst wilt */
}
/* Als je tekst in de container wilt */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Probeer het zelf uit

Andere breedte-hoogteraties

Voorbeeld - Breedte-hoogteratio 16:9

.container {
  padding-top: 56.25%; /* Breedte-hoogteratio 16:9 (9 gedeeld door 16 is 0.5625) */
}

Probeer het zelf uit

Voorbeeld - Breedte-hoogteratio 4:3

.container {
  padding-top: 75%; /* Breedte-hoogteratio 4:3 (3 gedeeld door 4 is 0.75) */
}

Probeer het zelf uit

Voorbeeld - Breedte-hoogteratio 3:2

.container {
  padding-top: 66.66%; /* Breedte-hoogteratio 3:2 (2 gedeeld door 3 is 0.6666) */
}

Probeer het zelf uit

Voorbeeld - Breedte-hoogteratio 8:5

.container {
  padding-top: 62.5%; /* Breedte-hoogteratio 8:5 (5 gedeeld door 8 is 0.625) */
}

Probeer het zelf uit

CSS aspect-ratio attribute

In nieuwere browsers kunt u eenvoudig CSS gebruiken aspect-ratio Eigenschap:

Voorbeeld - Breedte-hoogteratio 3:2

.container {
  aspect-ratio: 3 / 2;
}

Probeer het zelf uit

Tabelnummers vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.