Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Unsur Menggunakan CSS sahaja?

Memelihara Nisbah Aspek Elemen dengan CSS: Lebar Min daripada Ketinggian

Menetapkan lebar minimum elemen agar sepadan dengan ketinggiannya boleh menjadi satu cabaran apabila ketinggian tidak ditakrifkan dengan jelas. Semasa menggunakan jQuery menawarkan penyelesaian, adalah mungkin untuk mencapai tingkah laku ini secara langsung dalam CSS.

Untuk mengekalkan nisbah aspek, manfaatkan konsep "elemen yang diganti". Imej () ialah contoh utama. Dengan menetapkan ketinggiannya, nisbah aspek intrinsik dikekalkan, melaraskan lebar secara automatik untuk dipadankan.

Melaksanakan Penyelesaian CSS

Buat "bekas" dengan arbitrari yang diingini ketinggian input dan tetapkan kedudukannya kepada "relatif". Di dalam bekas, tambahkan imej dengan ketinggian 100%. Ini secara automatik menetapkan lebar imej secara berkadar.

Sarang elemen "kandungan" dengan kedudukan mutlak untuk menduduki keseluruhan ruang bekas tanpa mempengaruhi dimensinya.

Kawalan Nisbah Aspek

Untuk melaraskan nisbah bidang, ubah ketinggian imej. Sebagai contoh, nisbah 4:3 memerlukan menetapkan ketinggian imej kepada 133%.

Pertimbangan Tambahan

Gif 1x1 px lutsinar yang digunakan dalam penyelesaian boleh digantikan dengan elemen lain, seperti kanvas atau SVG. Jika imej asal tidak mempunyai nisbah bidang 1:1, nilai ketinggian memerlukan pelarasan.

Untuk menetapkan ketinggian elemen berdasarkan lebar, rujuk kepada "Kekalkan Nisbah Aspek Div ​​dengan CSS" sumber.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Unsur Menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!