Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Div ​​Semasa Mengisi Keseluruhan Skrin dengan CSS?

Kekalkan Nisbah Aspek Div ​​Semasa Mengisi Lebar dan Tinggi Skrin dengan CSS

Mengekalkan nisbah aspek tetap untuk div sambil memastikan ia memenuhi lebar dan ketinggian skrin yang tersedia tanpa melebihi dimensi di kedua-dua belah pihak boleh menjadi tugas yang rumit dalam CSS. Untuk menangani cabaran ini, kami mempersembahkan penyelesaian CSS tulen yang memanfaatkan unit port pandang baharu, vw dan vh.

Menggunakan vw dan vh, kami boleh menentukan lebar dan tinggi div berbanding dengan lebar dan ketinggian port pandangan . Ini memastikan bahawa div akan sentiasa menduduki ruang maksimum tanpa melanggar nisbah bidang. Untuk mengelakkan div daripada melimpah, kami juga menetapkan kekangan ketinggian maksimum dan lebar maksimum menggunakan nilai nisbah.

Untuk memusatkan div secara menegak dan mendatar, kami menggunakan kedudukan: mutlak dan letakkannya di bahagian atas, tepi bawah, kiri dan kanan tetingkap. Ini memastikan bahawa div akan kekal di tengah tanpa mengira saiz skrin.

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 */
}

Penyelesaian ini menyesuaikan diri dengan saiz skrin yang berbeza sambil mengekalkan nisbah aspek 16:9 yang dikehendaki. Ubah saiz tetingkap secara menegak atau mendatar, dan div akan melaraskan dengan sewajarnya, menempati ruang maksimum tanpa bar skrol atau herotan.

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