Atribut aspect-ratio CSS

halaman sebelumnya animation-timing-function
halaman berikutnya backdrop-filter

Definisi dan penggunaan

aspect-ratio Atribut memungkinkan Anda menentukan proporsi lebar dan tinggi elemen.

Jika diset aspect-ratio dan width Atribut, tinggi akan disesuaikan menurut rasio lebar-tinggi yang ditentukan.

Untuk mengerti lebih baik aspect-ratio Atribut, lihat pertunjukan.

Petunjuk：Dalam layout bererespon aspect-ratio Atribut, saat ukuran elemen sering berubah, Anda ingin mempertahankan rasio lebar dan tinggi.

Contoh

Contoh 1

Tambahkan rasio lebar-tinggi ke elemen

div {
  aspect-ratio: 3 / 2;
}

Coba sendiri

Contoh 2

Jika ukuran elemen div perlu berubahaspect-ratio Atribut yang sangat cocok untuk mengawasi rasio lebar-tinggi elemen div. Misalnya, di pustaka gambar, Anda ingin ukuran elemen div dapat berubah-bertambah untuk memadai semua perangkat, tetapi tetap mempertahankan rasio lebar-tinggi gambar:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>gang</div>
  <div>bunga di jalan</div>
  <div>bukit</div>
  <div>Cinque Terre</div>
</div>

Coba sendiri

CSS 语法

aspect-ratio: number/number|initial|inherit;

Nilai atribut

Nilai	Deskripsi
number	Angka pertama menentukan nilai lebar dalam rasio lebar-tinggi.
number	Angka kedua menentukan nilai tinggi dalam rasio lebar-tinggi. Pilihan. Jika belum diset, nilai tinggi baku adalah 1.
initial	Tetapkan atribut ini ke nilai baku. Lihat initial。
inherit	Mewarisi atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai baku：	auto
Inheritance:	Tidak
Pembuatan animasi：	Dukungan. Lihat:Atribut berhubungan dengan animasi。
Versi：	CSS3
语法 JavaScript：	object.style.aspectRatio="16/9"