Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​dengan CSS untuk Paparan Responsif?

Mengekalkan Nisbah Aspek Div ​​dalam CSS untuk Paparan Responsif

Dalam bidang reka bentuk web responsif, mengekalkan nisbah aspek elemen adalah penting untuk memastikan integriti visualnya merentas saiz skrin yang berbeza. Untuk mencapai matlamat ini, CSS menawarkan penyelesaian bijak yang melaraskan ketinggian div secara automatik agar sepadan dengan lebarnya, mengekalkan bentuk segi empat samanya.

Untuk melaksanakan kesan ini, hanya gunakan kod CSS berikut pada elemen div anda:

div {
  height: 0;
  padding-bottom: 100%;
}

Teknik ini menggunakan pelapik berasaskan peratusan pada div, dengan berkesan mewujudkan nisbah aspek segi empat sama yang berskala secara berkadar dengan lebar div. Div luar bertindak sebagai pemegang tempat untuk segi empat sama, manakala div dalam mengandungi kandungan sebenar.

Petua Tambahan:

• Gunakan sifat warna latar belakang untuk menambah warna latar belakang pada div dan meningkatkan keterlihatannya.
• Laraskan nilai peratusan dalam sifat padding-bottom kepada ubah nisbah bidang seperti yang dikehendaki.

Contoh Kod:

<div>

Teknik ini disokong oleh kebanyakan pelayar dan akan memastikan elemen div anda mengekalkan segi empat sama bentuk tanpa mengira lebar ibu bapa.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​dengan CSS untuk Paparan Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!