Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Mengubah Saiz Div secara Responsif dengan CSS?

Responsif Mengubah Dimensi Div Sambil Mengekalkan Nisbah Aspek

Apabila bekerja dengan imej, menggunakan nilai peratusan pada lebar atau ketinggiannya mengekalkan nisbah aspeknya apabila ia mengembang atau mengecut. Walau bagaimanapun, mereplikasi gelagat ini dengan elemen lain boleh menjadi mencabar.

Nasib baik, CSS menawarkan penyelesaian untuk memautkan lebar dan ketinggian elemen menggunakan peratusan, memastikan nisbah aspeknya kekal konsisten.

Penyelesaian Menggunakan CSS

Ini boleh dicapai melalui fakta yang mengejutkan bahawa nilai peratusan harta padding-top adalah relatif kepada lebar blok yang mengandungi. Pertimbangkan coretan CSS berikut:

.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;
}

Contoh HTML:

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

Dalam contoh ini, div ".wrapper" menetapkan lebar kepada 50% ( atau mana-mana peratusan yang diingini) dan mencipta konteks relatif untuk ".utama" dalaman div.

Unsur pseudo ".wrapper:after" menggunakan sifat padding-top untuk mewujudkan nisbah padding 56.25%. Nisbah ini mewakili nisbah bidang 16:9, memastikan bahawa div ".utama" sentiasa mengekalkan nisbah bidang itu.

Akhir sekali, div ".utama" mengisi keseluruhan bekas ".wrapper" sambil mengekalkan aspeknya nisbah dan mempamerkan latar belakang biru langit dan teks putihnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Apabila Mengubah Saiz Div secara Responsif dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!