Bagaimana untuk Mengekalkan Nisbah Aspek Div ​​Semasa Mengubah Saiz Menggunakan CSS?

Cara Menukar Nisbah Aspek Mengekalkan Saiz Div Secara Responsif

Apabila menukar saiz imej, mudah untuk mengekalkan nisbah bidangnya dengan menetapkan sama ada lebar atau ketinggian sebagai peratusan. Walau bagaimanapun, mencapai kesan yang sama untuk elemen bukan imej mungkin kelihatan mencabar. Bolehkah kita memautkan lebar dan ketinggian div menggunakan peratusan untuk mengekalkan nisbah bidang semasa saiz semula?

Penyelesaian

Tentu saja! CSS menawarkan penyelesaian yang bijak untuk masalah ini. Walaupun ia mungkin kelihatan berlawanan dengan intuisi, peratusan padding-top sebenarnya berkaitan dengan lebar blok yang mengandungi. Ini membolehkan kami mencipta ketinggian dinamik berdasarkan lebar yang ditentukan.

Pertimbangkan kod CSS berikut:

.wrapper {
  width: 50%; /* Set the desired width */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 56.25%; /* 16:9 aspect ratio */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

Dalam HTML, kami akan membungkus div yang ingin kami ubah saiznya dengan kelas "pembungkus":

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

CSS ini mencipta elemen pseudo (::selepas) dalam "pembungkus" div. Dengan menetapkan bahagian atas pelapiknya sebagai peratusan lebar pembalut, kami membetulkan nisbah bidang div di dalamnya dengan berkesan. Apabila pembungkus diubah saiznya, elemen pseudo turut berubah, memastikan div yang terkandung ("utama") sentiasa mengekalkan nisbah bidang yang diingini.

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