Bagaimanakah Saya Boleh Membuat Ketinggian Div Melaraskan Secara Dinamik kepada Imej Latar Belakangnya?

Menyelesaikan Teka-teki Ketinggian Dinamik untuk Elemen Div dengan Imej Latar Belakang

Bagaimanakah anda boleh memastikan elemen div melaraskan ketinggiannya dengan anggun agar sepadan dengan saiz imej latar belakang yang anda tetapkan, tanpa menentukan ketinggian tetap atau minimum secara manual ketinggian?

Menyingkap Teknik Imej Latar Belakang Pelarasan Auto

Pembangun web telah mencipta penyelesaian bijak yang meniru gelagat elemen imej untuk elemen div dengan imej latar belakang. Dengan mengeksploitasi nisbah bidang imej, anda boleh menentukan ketinggian div bekas secara dinamik.

Pelaksanaan Langkah demi Langkah:

1. Tetapkan ketinggian elemen div kepada 0.
2. Kira peratusan padding-top menggunakan ketinggian imej untuk nisbah lebar didarab dengan lebar bekas.

Sebagai contoh, diberikan imej dengan ketinggian 853 piksel dan lebar 1280 piksel dan lebar div 100%:

padding-top: 66.64% /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */

CSS Contoh:

div {
    background-image: url('image.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%;
}

Aplikasi Praktikal:

Teknik ini memberikan elemen div keupayaan untuk melaraskan ketinggiannya secara automatik untuk menampung imej latar belakang. Ia sama seperti menggunakan elemen img, tetapi tanpa memerlukan pengisytiharan ketinggian atau ketinggian min yang jelas.

Lihat contoh berfungsi ini: http://jsfiddle.net/8m9ur5qj/

Oleh mengubah saiz bekas, anda boleh menyaksikan bagaimana ketinggian div berubah secara dinamik, mengekalkan nisbah bidang imej latar belakang.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Ketinggian Div Melaraskan Secara Dinamik kepada Imej Latar Belakangnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!