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

Div Responsif dengan Nisbah Aspek Dikekalkan Menggunakan CSS

Apabila cuba mengekalkan nisbah aspek sambil mengubah saiz div, anda boleh memanfaatkan kuasa CSS tanpa bergantung pada JavaScript.

CSS membolehkan anda memautkan ketinggian dan lebar elemen menggunakan peratusan. Begini cara untuk mencapainya:

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

Dalam contoh ini, div pembalut menetapkan lebar yang diingini (50%). The wrapper:after pseudo-element menggunakan peratusan atas padding berbanding lebar wrapper. Nilai 56.25% sepadan dengan nisbah bidang 16:9.

Div utama mengisi keseluruhan div pembalut, mengekalkan nisbah bidang yang ditentukan oleh peratusan bahagian atas padding pada pembungkus:selepas elemen pseudo.

Dengan menggunakan CSS, anda boleh mengekalkan nisbah aspek untuk div anda dengan mudah sambil mengubah saiznya secara responsif, tanpa memperkenalkan JavaScript.

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!