Bagaimana untuk Mencipta Div Berbentuk Persegi Responsif dengan CSS?

Bagaimana untuk Mencipta Div Berbentuk Petak Responsif dengan CSS?

Sebelum ini ditanya, soalan ini mencari kaedah untuk mengubah ketinggian div secara dinamik agar sepadan dengan lebarnya. Lebar dinyatakan dalam peratusan, jadi apabila lebar elemen induk berkurangan, div harus dikecilkan secara berkadar.

Untuk menangani perkara ini, kami boleh menggunakan sifat padding-bottom CSS. Dengan menetapkan padding-bottom sebagai peratusan, kita boleh mencipta nisbah antara ketinggian dan lebar div, memastikan ia kekal sama.

Berikut ialah contoh kod:

<div>

Dalam ini kod, div luar membentuk bentuk segi empat sama menggunakan lebar: 20% dan ketinggian: 0. Padding-bawah 20% menetapkan nisbah antara ketinggian dan lebar, menghasilkan nisbah aspek 1:1. Div dalam mengandungi kandungan sebenar.

Selain itu, demonstrasi Fiddle JavaScript disediakan untuk mempamerkan fungsi: [pautan ke Fiddle]

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div Berbentuk Persegi Responsif dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!