Sådan bevares højde-bredde-forhold

Lær, hvordan du bruger CSS til at bevare elementernes højde-bredde-forhold.

Sådan gøres - Højde lig med bredde

Første trin - Tilføj HTML:

Brug beholderselementer, såsom <div>og tilføj en underelement, hvis du ønsker tekst inde i den:

<div class="container">
  <div class="text">Vis tekst</div> <!-- Hvis du ønsker tekst inden i beholderen -->
</div>

Andet trin - Tilføj CSS:

for padding-top Tilføj procenter, for at bevare DIV's bredde-højde-forhold. Følgende eksempel vil oprette en DIV med bredde-højde-forhold 1:1 (højde og bredde er altid ens):

Eksempel - Bredde-højde-forhold 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Bredde-højde-forhold 1:1 */
  position: relative; /* Hvis du ønsker tekst inde i */
}
/* Hvis du ønsker tekst inden i beholderen */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Prøv det selv

Andre bredde-højde-forhold

Eksempel - Bredde-højde-forhold 16:9

.container {
  padding-top: 56.25%; /* Bredde-højde-forhold 16:9 (9 divideret med 16 er 0.5625) */
}

Prøv det selv

Eksempel - Bredde-højde-forhold 4:3

.container {
  padding-top: 75%; /* Bredde-højde-forhold 4:3 (3 divideret med 4 er 0.75) */
}

Prøv det selv

Eksempel - Bredde-højde-forhold 3:2

.container {
  padding-top: 66.66%; /* Bredde-højde-forhold 3:2 (2 divideret med 3 er 0.6666) */
}

Prøv det selv

Eksempel - Bredde-højde-forhold 8:5

.container {
  padding-top: 62.5%; /* Bredde-højde-forhold 8:5 (5 divideret med 8 er 0.625) */
}

Prøv det selv

CSS aspect-ratio 属性

I nyere browsere kan du simpelt henviser til CSS aspect-ratio Egenskab:

Eksempel - Bredde-højde-forhold 3:2

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

Prøv det selv

Tabletets tal angiver den første browserversion, der fuldt ud understøtter egenskaben.