Aspek-nisbah - Trik CSS

Properti CSS aspect-ratiomembolehkan anda membuat kotak yang mengekalkan dimensi berkadar di mana heightdan widthkotak dikira secara automatik sebagai nisbah. Ini adalah sedikit math-y, tetapi idenya adalah bahawa anda boleh membahagikan satu nilai dengan yang lain pada harta ini dan nilai yang dikira memastikan kotak tetap dalam perkadaran tersebut.

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

aspect-ratioditentukan dalam spesifikasi CSS Box Sizing Module Level 4, yang kini dalam Draf Kerja. Ini bermaksud ia masih dalam proses dan berpeluang untuk berubah. Tetapi dengan Chrome dan Firefox menyokongnya di belakang bendera eksperimen, dan Safari Technology Preview menambahkan sokongan untuknya pada awal 2021, terdapat isyarat kuat yang aspect-ratiomendapat banyak momentum.

Sintaks

aspect-ratio: auto || ;

Dalam bahasa Inggeris biasa: aspect-ratiosama ada dianggap sebagai autolalai, atau menerima sebagai nilai di mana .

• Nilai awal: auto
• Berlaku untuk: semua elemen kecuali kotak sebaris dan ruby ​​dalaman atau kotak meja
• Diwarisi: tidak
• Peratusan: n / a
• Nilai dikira: kata kunci yang ditentukan atau sepasang nombor
• Jenis animasi: diskret

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;

Ia berfungsi pada kandungan yang diganti dan tidak diganti

Sekiranya anda berfikir, "Eh, ya, bukankah penyemak imbas sudah melakukan ini untuk kita pada gambar?" jawapannya: benar . Penyemak imbas melakukan beberapa pengiraan nisbah aspek mewah pada kandungan yang diganti seperti gambar. Oleh itu, jika gambar mempunyai, lebar 500 piksel, penyemak imbas melenturkan algoritma susun atur CSS untuk mengekalkan dimensi intrinsik atau "semula jadi" gambar. The aspect-ratioharta boleh digunakan untuk mengatasi mereka dimensi semulajadi berkesan.

Tetapi kandungan yang tidak diganti tidak mempunyai bahagian semula jadi. Itulah sebahagian besar perkara yang kami bekerjasama, seperti div. Daripada cuba mengekalkan perkadaran semula jadi elemen, aspect-ratiotetapkan ukuran "pilihan".

Sekarang, spesifikasi tersebut menyatakan bahawa spesifikasi CSS yang lebih lama, terutama CSS 2.1, tidak mengandungi perbezaan yang jelas antara kandungan yang diganti dan yang tidak diganti. Itu bermakna kita dapat melihat beberapa kes khas tambahan yang ditambahkan pada spesifikasi untuk membantu menjelaskannya. Buat masa ini, kami melihat penyemak imbas melancarkan sokongan untuk menetapkan nisbah aspek pilihan pada diganti dan tidak diganti secara berasingan, di mana sebilangan penyemak imbas dengan sokongan awal di belakang bendera eksperimen mungkin hanya menyokong aspect-ratiountuk kandungan yang tidak diganti. Pasti bernilai memerhatikan sokongan penyemak imbas semasa ia berkembang.

Ia berfungsi sendiri tanpa menentukan a widthatauheight

Jadi, kita boleh meletakkannya pada elemen seperti ini:

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

… Dan width: autotendangan lalai elemen secara implisit untuk mengatur dimensi elemen.

Ia berubah apabila widthatau heightberada di unsur yang sama

Katakan kita mempunyai elemen dengan lebar 300pxdan aspect-ratiodalam 3/1.

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

Secara semula jadi, aspect-ratioingin mengira dimensi elemen itu sendiri dan akan melakukannya berdasarkan konteks di mana ia digunakan. Tetapi dengan widthdilemparkan, ia memberitahu aspek-nisbah untuk menghitung kotak aspek aspek menggunakan 300pxsebagai lebar. Akibatnya, kita seperti baru sahaja menulis:

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

Ini masuk akal! Ingatlah, apabila tidak ada widthatau heightditentukan, penyemak imbas menganggap mereka berada autodan pergi dari sana. Apabila kita memberikan nilai widthdan heightnilai yang jelas , itulah yang biasa digunakan.

Ia tidak diendahkan dalam beberapa keadaan

Di sinilah keadaan menjadi sedikit fikiran kerana terdapat kes di mana aspect-ratioia diabaikan atau pengiraannya dipengaruhi oleh sifat lain. Itu merangkumi:

Apabila keduanya widthdan heightdinyatakan pada elemen

Kami baru melihat bagaimana pengisytiharan sama ada widthatau tidak heightdan elemen akan mempengaruhi pengiraan aspect-ratio. Tetapi jika elemen tersebut sudah memiliki kedua widthdan height, elemen tersebut akan digunakan sebagai ganti aspect-ratio. Ia memerlukan kedua-dua sifat untuk menggantikan aspect-ratio; menetapkan sama ada heightatau widthbersendirian tidak akan memecahkan nisbah aspek elemen.

Membuat sen, bukan? Sekiranya menggunakan salah satu widthatau heightmemaksa aspect-ratiountuk menggunakan nilai tersebut dalam perhitungan, maka secara logiknya mengikuti bahawa menggunakan kedua-duanya akan benar-benar menimpa aspect-ratiosama sekali kerana kedua-dua nilai tersebut sudah disediakan dan ditetapkan.

Apabila kandungan pecah daripada nisbah

Ringkasnya, jika anda memiliki elemen dengan nisbah aspek dan isinya panjang sehingga memaksa elemen untuk berkembang, elemen tersebut akan berkembang. Dan jika elemen mengembang, dimensinya berubah dan, dengan itu, tidak ada lagi nisbah aspek. Inilah sebabnya mengapa spesifikasi mengatakan bahawa harta tanah menetapkan nisbah aspek "pilihan". Ia lebih disukai, tetapi tidak ditetapkan.

Tidak suka bagaimana ia berfungsi? Menetapkan min-height: 0;elemen akan membolehkan kandungan melimpah nisbah aspek yang disukai dan bukannya mengembangkannya.

Apabila ia "kehilangan" min-*dan max-*sifat

Kami hanya melihat bagaimana ia berfungsi, bukan? Apabila kandungan melebihi dimensi kotak, kotak aspect-ratioakan hilang kerana kotak mengembang dengan kandungannya. Kita boleh mengatasinya dengan min-width: 0.

Itu kerana semua min-*dan max-*sifat biasanya bertempur widthdan heightuntuk menjadi supremasi dalam perang terhadap pengiraan Model Model. Sebagai contoh:

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

Tetapi:

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

Itu kerana min-widthsama ada mencegah turun widthdi bawah nilai tertentu, atau diabaikan kerana widthset telah menetapkan elemen melebihi lebar minimum yang diperlukan. Perkara yang sama juga dengan min-height, max-width, dan max-height.

Inti dari semua ini: jika kita menetapkan kedua min-*atau max-*harta pada elemen yang sama dengan aspect-ratiodan mereka "menang" widthatau height, maka itu akan menimpa aspect-ratio. Memberitahu anda bahawa itu adalah sedikit minda. ?

Sokongan penyemak imbas

IE	Hujung	Firefox	Chrome	Safari	Opera
Tidak	Tidak	86 1.2,3	90 4	TP 5	Tidak

Android Chrome	Android Firefox	Penyemak Imbas Android	Safari iOS	Opera Mudah Alih
Tidak	Tidak	Tidak	Tidak	Tidak

Maklumat lanjut

Artikel pada 1 Jul 2020

Pandangan Pertama pada `aspek-nisbah`

Sara Cope