⌘K

Savybė aspect-ratio

Savybė aspect-ratio nustato elementų lygiavimą išilgai skersinės ašies flex blokams ir išilgai horizontalios ašies grid'ams. Taikoma tėviniam elementui.

Sintaksė

cssselektorius {
  aspect-ratio: auto arba santykis;
}

Reikšmės

Reikšmė Aprašas
auto Elementas neturi pageidaujamo kraštinių santykio ir naršyklė nustato jį automatiškai, remiantis elemento plotis ir aukščiu.
santykis Santykis užrašomas forma 16/9, čia pirmasis skaičius yra plotis, o antrasis skaičius - aukštis. Jei kuri nors reikšmė ne nurodyta, ji laikoma lygia 1. Taip pat kai kuriuos santykius leidžiama užrašyti vienu skaičiumi. Pavyzdžiui, 2/1 galima užrašyti kaip 0.5, tai duos tą patį rezultatą.
auto && santykis Jei kraštinių santykis eina kartu su raktiniu žodžiu auto (pavyzdys: auto 1/2), tai bus pasirinktas nurodytas santykis, bet pakeičiamiems elementams (tokius kaip vaizdai ir video) su savo pačių santykiu bus naudojamas tik jis.

Pavyzdys

Nustatykime mygtukui automatinį kraštinių santykį: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Pavyzdys

O dabar nustatykime mygtuko kraštinių santykį kaip 1/2: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Taip pat žiūrėkite

BackSavybė resizeNextSavybė object-fit