Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menjadikan Tinggi Elemen CSS Secara Dinamik Sama Dengan Lebarnya?

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

Barbara Streisand
Barbara Streisandasal
2024-12-25 22:22:18739semak imbas

How Can I Make a CSS Element's Height Dynamically Equal to Its Width?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn