Bagaimanakah Saya Boleh Menjadikan Tinggi Elemen CSS Secara Dinamik Sama Dengan Lebarnya?

Memastikan Ketinggian Sama dengan Lebar Dinamik dalam Reka Letak CSS Bendalir

Dalam CSS, tetapkan ketinggian elemen sama dengan lebarnya untuk mengekalkan nisbah aspek segi empat sama boleh membuktikan mencabar. Soalan ini meneroka penyelesaian CSS sahaja untuk mencapai reka letak dinamik ini.

Penyelesaian itu melibatkan mencipta elemen tiruan kosong dengan set margin atasnya sebagai peratusan. Peratusan ini mewakili nisbah bidang bentuk yang diingini. Contohnya, nisbah bidang 1:1 akan mempunyai margin atas 100%.

Di dalam elemen bekas, elemen tambahan ditambah dengan kedudukan mutlak. Elemen ini, digayakan dengan warna latar belakang yang diingini, terbentang untuk mengisi keseluruhan bekas, menghasilkan nisbah aspek segi empat sama yang secara automatik melaraskan kepada lebar bekas.

Helah ini menyediakan cara yang mudah dan berkesan untuk menetapkan ketinggian elemen yang sama dengan lebarnya, membolehkan penciptaan reka letak bendalir dinamik dengan nisbah bidang segi empat sama dalam CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjadikan Tinggi Elemen CSS Secara Dinamik Sama Dengan Lebarnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!