Aspect Ratio
Tetapkan nisbah aspek elemen
Sintaks
layout="aspect:[value]"Nilai
| Nilai | CSS Output | Huraian |
|---|---|---|
auto | aspect-ratio: auto | Nisbah aspek semula jadi |
square | aspect-ratio: 1 / 1 | Segi empat sama 1:1 |
video | aspect-ratio: 16 / 9 | Video 16:9 |
Contoh
html
<div layout="aspect:square">Square</div>
<div layout="aspect:[4/3]">4:3</div>Pratonton
Nisbah Aspek Segi Empat
layout="aspect:square" - Nisbah aspek 1:1
1:1
16:9
Lihat Kod
html
<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div layout="aspect:square flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">1:1</div>
<div layout="aspect:video flex center" visual="bg:primary text:white rounded:small" style="width: 80px;">16:9</div>
</div>Nilai Arbitrari
Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
html
<div layout="aspect:[custom-value]">Custom</div>