Bagaimana Saya Boleh Mengekalkan Nisbah Aspek Tanpa JavaScript?

Kekalkan Nisbah Aspek dengan Lebar Dilaraskan Secara Berkadaran

Mengekalkan nisbah aspek unsur berdasarkan ketinggiannya tanpa menggunakan JavaScript boleh menjadi satu cabaran. Seseorang mungkin mempertimbangkan untuk menggunakan padding-left sebagai peratusan ketinggian, tetapi kaedah ini terbukti tidak berkesan.

Pertimbangkan penanda berikut:

<code class="html"><div class="box">
  <div class="inner"></div>
</div></code>

Matlamatnya adalah untuk mengekalkan nisbah aspek kotak mengikut kepada ketinggiannya, yang berubah secara dinamik berdasarkan margin peratusan:

<code class="css">.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}</code>

Nasib baik, penyelesaian CSS asli wujud: sifat nisbah aspek. Sifat ini membolehkan anda menetapkan nisbah lebar elemen kepada ketinggiannya.

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

Dalam contoh ini, kotak mempunyai ketinggian bendalir 50% dan nisbah bidang 2:1. Apabila anda mengubah saiz bekas, kotak akan mengekalkan nisbah bidangnya, memastikan ia sentiasa kekal seimbang secara berkadar.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Mengekalkan Nisbah Aspek Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!