Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Secara Responsif Hanya Menggunakan CSS?

Cara Mengekalkan Nisbah Aspek Div ​​dengan Saiz Responsif

Walaupun CSS membenarkan imej mengekalkan nisbah bidangnya dengan lebar atau ketinggian berasaskan peratusan, teknik yang sama mungkin tidak nampaknya terpakai secara langsung kepada elemen lain. Walau bagaimanapun, adalah mungkin untuk mengekalkan nisbah bidang div menggunakan CSS tulen.

Penyelesaian:

Manfaatkan fakta bahawa peratusan atas padding adalah relatif kepada kandungan lebar blok. Dengan menggabungkan ini dengan struktur div bersarang, anda boleh mencipta elemen terkunci nisbah aspek.

Contoh:

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

Dalam contoh ini, .wrapper div mempunyai lebar 50%. Unsur pseudo (.wrapper:after) ditambahkan untuk menetapkan nisbah bidang—dalam kes ini, ia ialah 16:9. Div .main bersarang mengisi keseluruhan div .wrapper, memastikan kandungan mengekalkan nisbah bidang yang ditentukan apabila div .wrapper diubah saiznya.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Secara Responsif Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!