Bagaimana untuk Mencipta Div CSS dengan Ketinggian Sama dengan Lebar Dinamiknya?

Ketinggian Padanan Lebar Dinamik: Reka Letak Bendalir CSS

Bertujuan untuk mencapai reka bentuk yang seimbang dari segi visual, pembangun sering berusaha untuk menyelaraskan ketinggian sesuatu elemen kepada lebarnya. Soalan ini menangani cabaran reka bentuk biasa: cara mencipta div dengan ketinggian yang sama dengan lebarnya, mengekalkan nisbah aspek 1:1 sambil membenarkan lebar berubah secara dinamik.

Penyelesaian yang dicadangkan melibatkan penggunaan elemen pemegang tempat dengan nisbah bidang yang dipratentukan. Dengan meletakkan elemen utama dalam ruang letak, nisbah bidang dikekalkan walaupun lebar elemen utama berubah. Kuncinya terletak pada memanfaatkan sifat CSS seperti kedudukan dan margin atas untuk menjajarkan elemen secara strategik dan memastikan dimensinya kekal berkadar.

Coretan kod berikut menunjukkan pendekatan:

#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! */
}

Dalam ini contoh, #container menetapkan lebar dinamik div. Elemen #dummy digunakan sebagai pemegang tempat dengan nisbah bidang 4:3 tetap, dicapai melalui sifat atas margin. #elemen kemudian diletakkan sepenuhnya dalam #dummy, memastikan ia memenuhi seluruh kawasan dan mengekalkan nisbah 1:1 yang sama dengan lebar.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Div CSS dengan Ketinggian Sama dengan Lebar Dinamiknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!