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

Mencapai Ketinggian Div Penyesuaian Auto Berdasarkan Saiz Imej Latar Belakang

Dalam pembangunan web, ketinggian div selalunya wajar dilaraskan secara automatik kepada saiz imej latar belakangnya. Walau bagaimanapun, menetapkan ketinggian tertentu atau ketinggian min untuk div boleh mengehadkan fleksibilitinya.

Terdapat penyelesaian inovatif yang membolehkan anda membuat imej latar belakang berkelakuan seperti elemen img, di mana ketinggiannya melaraskan secara automatik. Untuk mencapai matlamat ini, anda memerlukan nisbah lebar dan ketinggian imej.

Tetapkan ketinggian div kepada 0 dan tentukan sifat padding-topnya sebagai peratusan berdasarkan nisbah imej. Kod berikut menggambarkan ini:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Pendekatan ini pada asasnya memberi anda imej latar belakang dengan ketinggian automatik, serupa dengan elemen img. Anda boleh menemui prototaip yang berfungsi di http://jsfiddle.net/8m9ur5qj. Ubah saiz div untuk melihat bagaimana ketinggian melaraskan secara automatik berdasarkan saiz imej latar belakang.

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