Hur man behåller aspect ratio

Lär dig hur du använder CSS för att behålla elementets aspect ratio.

Hur man uppnr - Hjda lika som bredd

Steg 1 - Lgg till HTML:

Anvnd behlletselement, t.ex. <div>Om du vill att den ska innehlla text, lgg till ett underlement:

<div class="container">
  <div class="text">Some text</div> <!-- Om du vill ha text inuti behllet -->
</div>

Steg 2 - Lgg till CSS:

fr padding-top Lgg till procenttal fr att behlla DIV:s bredd- och hjdp proportion. I fallet nedan skapas en DIV med bredd- och hjdp proportion 1:1 (bredd och hjd r alltid lika):

Exempel - Bredd och hjd i proportion 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* Bredd och hjd i proportion 1:1 */
  position: relative; /* Om du vill ha text inuti */
}
/* Om du vill ha text inuti behllet */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Prova det personligen

Andra bredd- och hjdp proportioner

Exempel - Bredd och hjd i proportion 16:9

.container {
  padding-top: 56.25%; /* Bredd och hjd i proportion 16:9 (9 dividerat med 16 ger 0.5625) */
}

Prova det personligen

Exempel - Bredd och hjd i proportion 4:3

.container {
  padding-top: 75%; /* Bredd och hjd i proportion 4:3 (3 dividerat med 4 ger 0.75) */
}

Prova det personligen

Exempel - Bredd och hjd i proportion 3:2

.container {
  padding-top: 66.66%; /* Bredd och hjd i proportion 3:2 (2 dividerat med 3 ger 0.6666) */
}

Prova det personligen

Exempel - Bredd och hjd i proportion 8:5

.container {
  padding-top: 62.5%; /* Bredd och hjd i proportion 8:5 (5 dividerat med 8 ger 0.625) */
}

Prova det personligen

CSS aspect-ratio egenskap

I nyare webblsare kan du enkelt anvnda CSS aspect-ratio Egenskap:

Exempel - Bredd och hjd i proportion 3:2

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

Prova det personligen

Tabellen numrer anger den frsta webblsareversion som fullt stder egenskapen.