Ominaisuus aspect-ratio

Ominaisuus aspect-ratio asettaa elementtien tasauksen poikittaista akselia pitkin flex-lohkoille ja vaaka-akselia pitkin grideille. Sitä sovelletaan yläelementtiin.

Syntaksi

cssvalitsija {
  aspect-ratio: auto tai kuvasuhde;
}

Arvot

Arvo	Kuvaus
`auto`	Elementillä ei ole preferoitua kuvasuhdetta ja selain asettaa sen automaattisesti perustuen elementin leveyteen ja korkeuteen.
`kuvasuhde`	Kuvasuhde kirjoitetaan muodossa `16/9`, tässä ensimmäinen numero on leveys ja toinen numero on korkeus. Jos jotain arvoa ei ole annettu, sen katsotaan olevan `1`. Myös jotkut kuvasuhteet on sallittua kirjoittaa yhdellä numerolla. Esimerkiksi `2/1` voidaan kirjoittaa muodossa `0.5`, tämä antaa saman tuloksen.
`auto && kuvasuhde`	Jos kuvasuhde tulee yhdessä avainsanan `auto` kanssa (esimerkki: `auto` `1/2`), valitaan määritetty kuvasuhde, mutta korvattaville elementeille (kuten kuville ja videoille), joilla on oma kuvasuhde, käytetään vain sitä.

Esimerkki

Asetetaan painikkeelle automaattinen kuvasuhde:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Esimerkki

Asetetaan nyt painikkeen kuvasuhteeksi 1/2:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Katso myös

ominaisuus object-fit,
joka skaalaa elementtejä