Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek untuk Div ​​Secara Responsif Hanya Menggunakan CSS?

Memelihara Nisbah Aspek untuk Dimensi Div dengan Saiz Semula Responsif

Salah satu aspek penting reka bentuk web responsif ialah memastikan elemen menyesuaikan dengan lancar kepada berbeza saiz skrin sambil mengekalkan ciri-ciri intrinsiknya. Bayangkan anda ingin mencipta elemen div yang mematuhi nisbah aspek tertentu, serupa dengan tingkah laku imej apabila dinyatakan dengan peratusan lebar atau ketinggian. Adakah ia boleh dilakukan tanpa JavaScript?

Jawapannya ialah ya. Anda boleh memanfaatkan kuasa CSS tulen untuk mencapai kesan ini, seperti yang ditunjukkan oleh contoh 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;
}

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

Dalam coretan ini, div ".wrapper" berfungsi sebagai bekas, dengan lebarnya ditetapkan kepada 50% (anda boleh melaraskannya mengikut saiz yang anda inginkan). Aspek utama terletak pada elemen pseudo ".wrapper:after". Dengan menetapkan bahagian atas pelapiknya kepada 56.25%, yang merupakan timbal balik nisbah bidang yang diingini (16:9 dalam kes ini), ketinggian bekas akan melaraskan secara automatik untuk mengekalkan perkadaran yang betul.

The " .main" div diletakkan sepenuhnya dalam ".wrapper" dan memenuhi seluruh kawasan. Ia mempamerkan warna latar belakang yang kukuh dan teks yang kontras untuk keterlihatan.

Menggunakan teknik ini, anda boleh mencipta div responsif yang mengekalkan nisbah bidangnya dengan mudah, memastikan estetika visual yang konsisten merentas pelbagai peranti dan saiz skrin.

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