Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Elemen Berdasarkan Ketinggiannya?

Mengekalkan Nisbah Aspek Div ​​Berdasarkan Ketinggian

Mengekalkan lebar elemen sebagai peratusan ketinggiannya boleh mencabar. Semasa menggunakan nilai peratusan untuk padding-top boleh mencapai kesan yang bertentangan, padding-left sebagai peratusan bergantung pada lebar objek, bukan ketinggiannya.

Untuk menangani isu ini, CSS memperkenalkan sifat nisbah aspek, menyediakan penyelesaian yang elegan untuk mengekalkan nisbah aspek yang konsisten berdasarkan ketinggian. Coretan kod berikut menunjukkan penggunaannya:

<code class="CSS">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

Dalam contoh ini, elemen .box mempunyai ketinggian bendalir 50% dan nisbah bidang 2:1. Apabila ketinggian bekas berubah, ketinggian dan lebar kotak dilaraskan dengan sewajarnya, mengekalkan nisbah bidangnya.

Sifat nisbah aspek memastikan lebar kotak kekal berkadar dengan ketinggiannya, tanpa mengira kandungan teks atau saiz bekas . Ini menghapuskan keperluan untuk penyelesaian JavaScript yang kompleks dan menyediakan pendekatan CSS sahaja yang bersih dan cekap untuk mengekalkan nisbah bidang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Elemen Berdasarkan Ketinggiannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!