Īpašība aspect-ratio

Īpašība aspect-ratio norāda elementu izlīdzināšanu gar šķērsasi fleksa blokiem un pa horizontālo asi režģiem. Attiecas uz vecāka elementu.

Sintakse

cssselektors {
  aspect-ratio: auto vai attiecība;
}

Vērtība	Apraksts
`auto`	Elementam nav vēlamās malu attiecības, un pārlūkprogramma to iestata automātiski, pamatojoties uz elementa platumu un augstumu.
`attiecība`	Attiecība tiek pierakstīta kā `16/9`, šeit pirmais skaitlis ir platums, bet otrais skaitlis - augstums. Ja kāda vērtība nav norādīta, tad tā tiek uzskatīta par vienādu ar `1`. Arī dažas attiecības ir atļauts pierakstīt ar vienu skaitli. Piemēram, `2/1` var pierakstīt ka `0.5`, tas dos tādu pašu rezultātu.
`auto && attiecība`	Ja malu attiecība nāk kopā ar atslēgvārdu `auto` (piemērs: `auto` `1/2`), tad tiks izvēlēta norādītā attiecība, bet aizstājamiem elementiem (piemēram, attēliem un video) ar pašu malu attiecību tiks izmantota tikai tā.

Uzstādīsim pogai automātisku malu attiecību:

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

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

Результат:

Tagad uzstādīsim pogai malu attiecību ka 1/2:

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

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

Результат: