Sifat aspect-ratio

Sifat aspect-ratio menetapkan penjajaran elemen sepanjang paksi melintang untuk blok flex dan sepanjang paksi mendatar untuk grid. Digunakan pada elemen induk.

Sintaks

cssselector {
  aspect-ratio: auto atau nisbah;
}

Nilai

Nilai	Keterangan
`auto`	Elemen tidak mempunyai nisbah aspek pilihan dan pelayar menetapkannya secara automatik, berdasarkan lebar dan tinggi elemen.
`nisbah`	Nisbah ditulis dalam bentuk `16/9`, di sini nombor pertama ialah lebar, dan nombor kedua ialah tinggi. Jika mana-mana nilai tidak dinyatakan, maka ia dianggap sama dengan `1`. Juga beberapa nisbah boleh ditulis dengan satu nombor. Contohnya, `2/1` boleh ditulis sebagai `0.5`, ini akan memberikan hasil yang sama.
`auto && nisbah`	Jika nisbah aspek digabungkan dengan kata kunci `auto` (contoh: `auto` `1/2`), maka nisbah yang dinyatakan akan dipilih, tetapi untuk elemen yang boleh diganti (seperti gambar dan video) dengan nisbah aspek sendiri hanya nisbah aspek sendiri akan digunakan.

Contoh

Mari kita tetapkan nisbah aspek automatik untuk butang:

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

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

Результат:

Contoh

Sekarang mari kita tetapkan nisbah aspek untuk butang sebagai 1/2:

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

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

Результат:

Lihat juga

sifat object-fit,
yang menskalkan elemen