Atribut aspect-ratio CSS

Definisi dan penggunaan

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

Jika diatur aspect-ratio dan width Atribut, tinggi akan disesuaikan sesuai dengan proporsi lebar dan tinggi yang ditentukan.

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

Tips：Penggunaan dalam layout responsif aspect-ratio Atribut, saat ukuran elemen sering berubah, Anda ingin mempertahankan proporsi lebar dan tinggi.

Contoh

Contoh 1

Tambahkan proporsi lebar dan tinggi untuk elemen

div {
  aspect-ratio: 3 / 2;
}

Coba sendiri

Contoh 2

Jika ukuran elemen div perlu berubah-bertambahaspect-ratio Atribut yang sangat cocok untuk mengontrol proporsi lebar dan tinggi elemen div. Misalnya, di pustaka gambar, Anda ingin ukuran elemen div dapat berubah-bertambah untuk menyesuaikan diri dengan semua perangkat, tetapi tetap mempertahankan proporsi lebar dan tinggi gambar:

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

Coba sendiri

Syntaxa CSS

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

Nilai atribut

Nilai Deskripsi
number Angka pertama menentukan nilai lebar dalam proporsi lebar dan tinggi.
number

Angka kedua menentukan nilai tinggi dalam proporsi lebar dan tinggi.

Pilihan. Jika belum diatur, nilai tinggi secara default adalah 1.
initial Atur atribut ini ke nilai defaultnya. Lihat initial。
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit。

Detil teknis

Nilai default： auto
Inheritsi： Tidak
Pembuatan animasi： Dukungan. Lihat referensi：Atribut yang berhubungan dengan animasi。
Versi： CSS3
Syntaxa JavaScript： object.style.aspectRatio="16/9"

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung atribut ini penuhnya。

Chrome Edge Firefox Safari Opera
88 88 89 15 74

Halaman yang berhubungan

Tutoriale：Modul Susun tata letak CSS

Referensi：Properti Object-fit CSS

Referensi：Properti Object-position CSS