Bagaimana untuk Mengekalkan Nisbah Aspek 16:9 untuk Div ​​Mengisi Keseluruhan Skrin?

Cara Mengekalkan Nisbah Aspek Div ​​Semasa Mengisi Kedua-dua Lebar dan Tinggi Skrin

Apabila mereka bentuk tapak web dengan nisbah aspek tertentu, seperti 16:9 untuk paparan seperti video, adalah perlu untuk mengekalkan nisbah ini sambil mengisi ruang skrin yang tersedia. Tugasan ini memberikan cabaran dalam memastikan kandungan dipusatkan dan tidak pernah melebihi dimensi maksimum pada kedua-dua belah pihak.

Menggunakan CSS Viewport Unit

Penyelesaian CSS praktikal melibatkan penggunaan unit viewport, vw (lebar viewport) dan vh (tinggi viewport). Unit ini membenarkan elemen melaraskan dimensinya berbanding dengan saiz port pandangan. Dengan menetapkan lebar div kepada 100vw, ia mengembang untuk memenuhi keseluruhan lebar skrin. Untuk mengekalkan nisbah bidang 16:9, ketinggian ditetapkan kepada 56.25vw (dikira sebagai 9/16 * 100vw).

Mengekang Dimensi Maksimum

Untuk mengelakkan elemen daripada melimpah, kekangan ketinggian dan lebar maksimum digunakan menggunakan tinggi maks: 100vh dan lebar maksimum: 177.78vh (dikira sebagai 16/9 * 100vh).

Kedudukan dan Pemusatan

Div diletakkan dan dipusatkan secara menegak dan mendatar menggunakan kedudukan dan tetapan mutlak atas, bawah, kiri, dan kanan kepada 0. Ini memastikan div kekal berpusat dalam ruang skrin yang tersedia.

Dengan menggabungkan sifat CSS ini, anda boleh mencipta div yang mengekalkan nisbah bidangnya pada 16:9 sementara mengisi keseluruhan lebar dan ketinggian skrin. Penyelesaian ini responsif dan berfungsi secara konsisten merentas penyemak imbas utama tanpa memerlukan JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek 16:9 untuk Div ​​Mengisi Keseluruhan Skrin?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!