Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Div ​​Semasa Mengisi Keseluruhan Skrin Penyemak Imbas Menggunakan CSS Tulen?

Mengekalkan Nisbah Aspek Div ​​Semasa Mengisi Lebar dan Tinggi Skrin CSS

Dalam reka bentuk web, keperluan untuk mengekalkan nisbah aspek khusus untuk elemen div sambil mengisi kedua-dua lebar dan ketinggian skrin boleh timbul. Ini memberikan cabaran unik apabila berusaha untuk penyelesaian yang serasi merentas pelayar menggunakan CSS tulen.

Dua Pendekatan Biasa:

1. Bekas Imej: Menggunakan imej dengan nisbah bidang yang diingini untuk mengembangkan div bekas. Walau bagaimanapun, kaedah ini boleh mempamerkan gelagat yang tidak konsisten merentas penyemak imbas yang berbeza.
2. Padding Bawah Berkadar: Menetapkan padding bawah secara berkadar dengan lebar. Malangnya, teknik ini mengabaikan ketinggian dan membawa kepada tatal menegak yang berlebihan.

A Novel Lösung:

Untuk mengatasi batasan ini, pendekatan baru menggunakan pendekatan baru-baru ini memperkenalkan unit viewport CSS, vw (lebar viewport) dan vh (tinggi viewport). Dengan menggabungkan unit ini, kami boleh melaraskan dimensi div secara dinamik berdasarkan ruang skrin yang tersedia.

Coretan Kod:

div {
  width: 100vw;
  height: 56.25vw; /* 9/16 = .5625 aspect ratio */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh; /* 16/9 = 1.778 aspect ratio */
  margin: auto;
  position: absolute;
  top:0;bottom:0; /* vertical center */
  left:0;right:0; /* horizontal center */
}

Ciri Utama:

• Lebar div ditetapkan kepada 100% daripada lebar port pandangan (vw).
• Ketinggian dikira berdasarkan nisbah bidang (56.25% daripada lebar).
• Jika port pandangan lebih tinggi daripada ketinggian yang dikira, harta tinggi maks ditetapkan kepada 100vj.
• Jika port pandangan adalah lebih lebar daripada lebar yang dikira, sifat lebar maksimum ditetapkan kepada 1.778vw (diperoleh daripada nisbah bidang).
• Kedudukan mutlak dan jidar berpusat automatik memastikan div dijajarkan secara tengah dalam viewport.

Kesimpulan:

Dengan memanfaatkan unit CSS viewport, kami boleh mencapai penyelesaian serasi silang penyemak imbas yang mengekalkan nisbah aspek yang diingini bagi sesuatu div sambil mengisi ruang skrin yang tersedia dengan lancar secara mendatar dan menegak. Pendekatan ini menghapuskan keperluan untuk manipulasi JavaScript yang kompleks dan menyediakan penyelesaian yang mudah tetapi berkesan untuk reka letak web responsif.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Div ​​Semasa Mengisi Keseluruhan Skrin Penyemak Imbas Menggunakan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!