Rasio aspek - Trik CSS

Properti CSS aspect-ratiomemungkinkan Anda membuat kotak yang mempertahankan dimensi proporsional di mana heightdan widthdari kotak dihitung secara otomatis sebagai rasio. Ini sedikit matematika-y, tetapi idenya adalah Anda dapat membagi satu nilai dengan yang lain pada properti ini dan nilai yang dihitung memastikan kotak tetap dalam proporsi itu.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratiodidefinisikan dalam spesifikasi CSS Box Sizing Module Level 4, yang saat ini ada dalam Working Draft. Artinya, masih dalam proses dan memiliki peluang untuk berubah. Tetapi dengan Chrome dan Firefox yang mendukungnya di belakang bendera eksperimental, dan Pratinjau Teknologi Safari menambahkan dukungan untuk itu di awal 2021, ada sinyal kuat yang aspect-ratiomendapatkan banyak momentum.

Sintaksis

aspect-ratio: auto || ;

Dalam bahasa Inggris sederhana: aspect-ratiodiasumsikan secara autodefault, atau menerima a sebagai nilai di mana .

• Nilai awal: auto
• Berlaku untuk: semua elemen kecuali kotak sebaris dan ruby ​​internal atau kotak tabel
• Diwariskan: tidak
• Persentase: n / a
• Nilai yang dihitung: kata kunci tertentu atau sepasang angka
• Jenis animasi: diskrit

Nilai

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Ini berfungsi pada konten yang diganti dan tidak diganti

Jika Anda berpikir, "Uhm, bukankah browser sudah melakukan ini untuk kita pada gambar?" jawabannya adalah: tentu saja . Browser melakukan beberapa perhitungan rasio aspek yang mewah pada konten yang diganti seperti gambar. Jadi, jika sebuah gambar memiliki, katakanlah, lebarnya 500px, browser melenturkan algoritme tata letak CSS-nya untuk mempertahankan dimensi intrinsik atau "alami" gambar. The aspect-ratioproperti dapat digunakan untuk secara efektif mengesampingkan dimensi-dimensi alam.

Tetapi konten yang tidak diganti tidak memiliki proporsi yang wajar. Itulah sebagian besar hal yang kami kerjakan, seperti div. Daripada mencoba mempertahankan proporsi alami elemen, aspect-ratiotetapkan ukuran yang "disukai".

Sekarang, spesifikasi saat ini mencatat bahwa spesifikasi CSS yang lebih lama, terutama CSS 2.1, tidak mengandung perbedaan yang jelas antara konten yang diganti dan yang tidak. Itu berarti kami dapat melihat beberapa kasus khusus tambahan ditambahkan ke spesifikasi untuk membantu memperjelasnya. Untuk saat ini, kami melihat browser meluncurkan dukungan untuk menyetel rasio aspek yang disukai pada diganti dan tidak diganti secara terpisah, di mana beberapa browser dengan dukungan awal di belakang bendera eksperimental mungkin hanya mendukung konten yang aspect-ratiotidak diganti. Benar-benar layak untuk mengawasi dukungan browser saat berkembang.

Ia bekerja dengan sendirinya tanpa menentukan widthatauheight

Jadi, ya, kita cukup meletakkannya pada elemen seperti ini:

.element ( aspect-ratio: 16 / 9; )

… Dan default elemen width: autodijalankan secara implisit untuk menyetel dimensi elemen.

Itu berubah ketika widthatau heightberada di elemen yang sama

Katakanlah kita memiliki elemen dengan lebar 300pxdan aspect-ratiodari 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Secara alami, aspect-ratioingin menghitung dimensi elemen itu sendiri dan akan melakukannya berdasarkan konteks penggunaannya. Tapi dengan widthdilemparkan, itu memberitahu rasio aspek untuk menghitung kotak rasio aspek elemen menggunakan 300pxsebagai lebarnya. Akibatnya, kami seperti baru saja menulis:

.element ( height: 100px; width: 300px; )

Ini masuk akal! Ingat, ketika tidak ada widthatau heightditentukan, browser menganggap itu ada autodan pergi dari sana. Ketika kami memberikan eksplisit widthdan heightnilai, itulah yang digunakan.

Ini diabaikan dalam beberapa situasi

Di sinilah segala sesuatunya menjadi sedikit membingungkan karena ada kasus di mana aspect-ratioterlewatkan atau perhitungannya dipengaruhi oleh properti lain. Itu termasuk:

Ketika keduanya widthdan heightdideklarasikan pada elemen

Kami baru saja melihat bagaimana mendeklarasikan salah satu widthatau heightpada dan elemen akan mempengaruhi perhitungan aspect-ratio. Tapi jika elemen sudah memiliki widthdan height, itu akan digunakan sebagai pengganti aspect-ratio. Ini membutuhkan kedua properti untuk menimpa aspect-ratio; pengaturan baik heightatau widthsendiri tidak akan merusak rasio aspek elemen.

Bikin senes, kan? Jika menggunakan salah satu widthatau heightmemaksa aspect-ratiountuk menggunakan nilai itu dalam penghitungan, maka secara logis mengikuti bahwa penggunaan keduanya akan sepenuhnya menimpa aspect-ratiosemuanya karena kedua nilai sudah disediakan dan disetel.

Saat konten keluar dari rasio

Sederhananya, jika Anda memiliki elemen dengan rasio aspek dan isinya sangat panjang sehingga memaksa elemen untuk berkembang, maka elemen tersebut akan mengembang. Dan jika elemen mengembang, dimensinya berubah dan, dengan demikian, tidak ada lagi rasio aspek. Inilah mengapa spesifikasi mengatakan properti menyetel rasio aspek "disukai". Ini disukai, tetapi tidak ditentukan.

Tidak suka cara kerjanya? Menyetel min-height: 0;elemen akan memungkinkan konten meluap dari rasio aspek pilihan alih-alih meluaskannya.

Ketika "kehilangan" min-*dan max-*properti

Kami hanya melihat bagaimana cara kerjanya, bukan? Saat konten melebihi dimensi kotak, aspect-ratiosecara efektif hilang karena kotak mengembang dengan konten. Kita bisa menggantinya dengan min-width: 0.

Itu karena semua properti min-*dan max-*biasanya berperang widthdan heightuntuk supremasi dalam perang atas perhitungan Model Kotak. Sebagai contoh:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Tapi:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Itu karena min-widthmencegah widthdari pergi ke bawah nilai tertentu, atau itu diabaikan karena widthset telah menyetel elemen melebihi lebar minimum yang seharusnya. Hal yang sama berlaku untuk min-height, max-widthdan max-height.

Inti dari semua ini: jika kita menetapkan baik properti min-*atau max-*pada elemen yang sama aspect-ratiodan mereka "menang" atas widthatau height, maka properti tersebut akan menimpa aspect-ratio. Sudah kubilang itu sedikit membingungkan pikiran. ?

Dukungan browser

YAITU	Tepi	Firefox	Chrome	Safari	Opera
Tidak	Tidak	86 1.2,3	90 4	TP 5	Tidak

Android Chrome	Android Firefox	Browser Android	iOS Safari	Opera Mobile
Tidak	Tidak	Tidak	Tidak	Tidak

Informasi lebih lanjut

Artikel pada 1 Juli 2020

Tampilan Pertama pada `rasio aspek`

Sara Cope