Bagaimana untuk Mengekalkan Nisbah Aspek Semasa Mengisi Keseluruhan Skrin dengan CSS?

Mengekalkan Nisbah Aspek semasa Mengisi Lebar dan Ketinggian Skrin dalam CSS

Masalah:
Mencipta elemen div dengan nisbah bidang tetap yang memenuhi keseluruhan lebar dan ketinggian skrin tanpa melebihinya sempadan.

Penyelesaian:
Gunakan unit port pandangan CSS vw dan vh untuk menetapkan dimensi div.

CSS Pelaksanaan:

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

Penjelasan:

• Unit Viewport: vw dan vh mengukur unit berbanding lebar viewport dan ketinggian, masing-masing.
• Aspek Nisbah: Ketinggian ditetapkan kepada 56.25% daripada lebar, mengekalkan nisbah bidang 9:16 yang malar.
• Dimensi Maks: Elemen dikekang dalam dimensi port pandang menggunakan maks -tinggi dan lebar maks.
• Memusatkan: Sifat kedudukan memusatkan elemen secara menegak dan mendatar pada skrin menggunakan atas:0; bawah:0; dan kiri:0; kanan:0;.

Hasil:

Elemen div mengembang untuk mengisi ruang skrin yang tersedia tanpa memecahkan nisbah bidangnya, tanpa mengira orientasi peranti atau saiz skrin.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Semasa Mengisi Keseluruhan Skrin dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!