Bagaimana untuk Mencipta Div Responsif, Berbentuk Segi Empat dalam CSS?

Mencipta Div Responsif, Berbentuk Segi Empat

Soalan:

Bagaimana anda boleh mereka bentuk elemen div dalam CSS untuk mengekalkan nisbah aspek segi empat sama, melaraskan ketinggiannya secara berkadar dengan lebarnya, apabila elemen induk berubah saiz?

Jawapan:

Terdapat teknik mudah untuk mencapainya menggunakan pelapik:

1. Tetapkan ketinggian div kepada 0. Ini "memperdayakan" penyemak imbas untuk menjadikan ketinggian itu fleksibel.
2. Tentukan lebar div sebagai peratusan.
3. Tetapkan bahagian bawah padding kepada peratusan yang sama dengan lebar. Ini memaksa penyemak imbas melaraskan ketinggian untuk mengekalkan nisbah bidang segi empat sama.

Berikut ialah contoh kod:

<div>

Div paling luar membentuk bentuk segi empat sama, manakala div dalam mengandungi kandungan sebenar. Pendekatan ini berkesan mengekalkan nisbah aspek segi empat sama apabila lebar elemen induk berubah. Ia serasi dengan kebanyakan penyemak imbas.

Contoh langsung boleh didapati di jsfiddle: [masukkan pautan jsfiddle di sini]

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