Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Semasa Mengisi Keseluruhan Skrin dalam CSS?

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

Untuk mengekalkan nisbah bidang div semasa mengisi lebar skrin dan ketinggian, kita boleh menggunakan unit port pandangan CSS vw (lebar port pandangan) dan vh (tinggi port pandangan). Pendekatan ini memastikan bahawa elemen akan sentiasa mengisi saiz paparan maksimum tanpa memecahkan nisbah atau membuat bar skrol.

FIDDLE

CSS tulen

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

CSS ini memastikan bahawa div:

• Meluas untuk merangkumi lebar dan ketinggian penuh skrin (unit vw dan vh).
• Mengekalkan nisbah bidang 16:9 (nisbah ketinggian:lebar 56.25 vw:100vw).
• Menghalang limpahan dengan menetapkan ketinggian dan lebar maksimum kekangan.
• Memusatkan div secara menegak dan mendatar dalam ruang port pandangan yang tersedia.

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