Properti aspect-ratio

Properti aspect-ratio mengatur perataan elemen sepanjang sumbu silang untuk blok flex dan sepanjang sumbu horizontal untuk grid. Diterapkan pada elemen induk.

Sintaks

selector {
	aspect-ratio: auto atau rasio;
}

Nilai

Nilai	Deskripsi
`auto`	Elemen tidak memiliki rasio aspek yang disukai dan browser mengaturnya secara otomatis, berdasarkan lebar dan tinggi elemen.
`rasio`	Rasio ditulis dalam bentuk `16/9`, di sini angka pertama adalah lebar, dan angka kedua adalah tinggi. Jika suatu nilai tidak disebutkan, maka dianggap sama dengan `1`. Juga beberapa rasio dapat ditulis dengan satu angka. Misalnya, `2/1` dapat ditulis sebagai `0.5`, ini akan memberikan hasil yang sama.
`auto && rasio`	Jika rasio aspek disertai dengan kata kunci `auto` (contoh: `auto` `1/2`), maka rasio yang ditentukan akan dipilih, tetapi untuk elemen yang dapat diganti (seperti gambar dan video) dengan rasio aspeknya sendiri hanya rasio aspeknya sendiri yang akan digunakan.

Contoh

Mari atur rasio aspek otomatis untuk tombol:

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

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

Contoh

Sekarang mari atur rasio aspek untuk tombol sebagai 1/2:

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

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

Lihat juga

properti object-fit,
yang menskalakan elemen