Bagaimana untuk Mengekalkan Nisbah Aspek dan Memusatkan Div Menggunakan CSS?

Mengekalkan Nisbah Aspek Mengikut Lebar dan Tinggi

Memastikan div mengekalkan nisbah aspeknya adalah penting untuk reka bentuk responsif. Ini memastikan perkadaran elemen kekal konsisten tanpa mengira dimensi atau orientasinya.

Untuk mencapai ini hanya menggunakan CSS, kami boleh memanfaatkan harta nisbah aspek moden.

Aspek -Harta Nisbah

Sifat nisbah aspek menentukan nisbah lebar kepada ketinggian sesuatu elemen. Sebagai contoh, nilai 1 / 1 akan menghasilkan segi empat sama, manakala 16 / 9 akan mencipta segi empat tepat dengan nisbah bidang yang sama seperti paparan 16:9.

Memusatkan Div Secara Mendatar dan Menegak

Untuk memusatkan elemen secara mendatar dan menegak dalam induknya, kita boleh menggunakan sifat CSS berikut:

margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Kod Contoh

Menggabungkan nisbah aspek dan sifat pemusatan, kita boleh mencipta div segi empat sama yang mengekalkan nisbah bidangnya sambil dipusatkan dalam port pandangan:

.ar-1-1 {
  aspect-ratio: 1 / 1;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

Kod ini akan mencipta div segi empat sama yang mengambil keseluruhan port pandangan, sambil mengekalkan nisbah bidang 1:1. Div juga akan dipusatkan secara mendatar dan menegak dalam port pandang.

Nota Tambahan

• Sifat nisbah aspek belum lagi disokong dalam semua penyemak imbas, tetapi disokong dalam penyemak imbas moden seperti Chrome, Firefox dan Safari.
• Untuk memastikan keserasian dengan penyemak imbas lama, anda boleh menggunakan polyfill seperti [picturefill](https://github.com/scottjehl/picturefill) atau [respond.js](https ://github.com/scottjehl/Respond).

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