Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Berdasarkan Ketinggian Menggunakan CSS?

Mengekalkan Nisbah Aspek Div ​​Berdasarkan Ketinggian Menggunakan CSS

Dalam senario tertentu, anda mungkin perlu memastikan bahawa lebar elemen kekal sebagai peratusan ketinggiannya, tanpa mengira kebolehubahan ketinggian. Walaupun penyelesaian JavaScript wujud untuk ini, CSS juga mungkin menyediakan pendekatan yang elegan.

Untuk mencapai ini, gunakan sifat nisbah aspek:

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

Di sinilah sifat nisbah aspek benar-benar bersinar:

• Ia mewujudkan hubungan tetap antara ketinggian dan lebar elemen.
• Akibatnya, nisbah bidang kotak (dalam kes ini, 2:1) dikekalkan tanpa mengira ketinggian tetingkap berubah.

Penyelesaian ini memastikan bahawa lebar elemen sentiasa 50% daripada ketinggiannya, walaupun apabila saiz tetingkap diubah secara menegak.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Berdasarkan Ketinggian Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!