Bolehkah CSS Mengekalkan Nisbah Aspek 1:1 dengan Memadankan Tinggi Elemen Secara Dinamik dengan Lebar?

Padan Secara Dinamik Tinggi dengan Lebar dalam Reka Letak Bendalir CSS

Dalam susun atur CSS cecair, elemen boleh melaraskan saiznya secara automatik berdasarkan ruang yang tersedia . Ini boleh menimbulkan cabaran apabila cuba mengekalkan nisbah aspek tertentu, seperti segi empat sama atau segi empat tepat.

Soalan:

Bolehkah CSS digunakan untuk menetapkan ketinggian elemen yang sama dengan lebarnya, mengekalkan aspek 1:1 nisbah?

Contoh:

Pertimbangkan elemen bekas dan elemen div bersarang dengan struktur berikut dan susun atur:

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS:

div {
  width: 80%;
  height: same-as-width
}

Penyelesaian:

Walaupun tidak mungkin untuk menetapkan ketinggian secara eksplisit untuk memadankan lebar dengan CSS sahaja, penyelesaian boleh dicapai menggunakan elemen dummy dan bijak kedudukan.

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div>

Dengan menggunakan sifat margin atas pada elemen tiruan dan menetapkannya kepada 75% (untuk memadankan nisbah bidang 4:3), kami membuat rujukan untuk ketinggian. Elemen itu kemudiannya diletakkan secara mutlak dalam kawasan rujukan ini, menghasilkan ketinggian yang sama dengan lebarnya.

Atas ialah kandungan terperinci Bolehkah CSS Mengekalkan Nisbah Aspek 1:1 dengan Memadankan Tinggi Elemen Secara Dinamik dengan Lebar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!