Bagaimanakah Saya Boleh Menetapkan Lebar Elemen Secara Berkadar dengan Tingginya Menggunakan CSS?

Melaraskan Lebar Elemen mengikut Ketinggian Menggunakan CSS

Menetapkan lebar elemen berdasarkan ketinggian boleh dicapai melalui jQuery, seperti yang dinyatakan dalam soalan asal. Walau bagaimanapun, proses ini boleh diperkemas menggunakan CSS.

Untuk mencapainya, manfaatkan konsep elemen yang diganti seperti . Unsur-unsur ini secara semula jadi melaraskan lebarnya untuk mengekalkan nisbah bidang apabila hanya ketinggian ditentukan.

Pertimbangkan contoh berikut:

.container {
  position: relative;
  display: inline-block;
  height: 50vh;
}

.container > img {
  height: 100%;
}

.contents {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Ketinggian elemen .bekas menentukan lebar minimum. Telus dengan nisbah aspek 1:1 memastikan bahawa lebar .container dan anak .contents elemen sentiasa berkadar dengan ketinggiannya.

Sebagai alternatif, untuk mengekalkan nisbah aspek 4:3 untuk .contents, tetapkan img's ketinggian kepada 133%. Menggunakan atau juga boleh dilaksanakan.

Untuk situasi di mana ketinggian elemen perlu dilaraskan berdasarkan lebar, rujuk panduan untuk mengekalkan nisbah bidang menggunakan CSS.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menetapkan Lebar Elemen Secara Berkadar dengan Tingginya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!