Bagaimanakah Saya Boleh Melaraskan Ketinggian Div Secara Automatik untuk Memadankan Saiz Imej Latar Belakangnya?

Automasi Ketinggian Div Berdasarkan Saiz Latar Belakang

Dalam pembangunan web, selalunya wajar ketinggian div menyesuaikan secara automatik kepada saiz imej latar belakangnya. Walau bagaimanapun, menetapkan ketinggian khusus untuk div boleh menghalang kefungsian ini.

Penyelesaian:

Teknik licik adalah untuk memanfaatkan sifat padding-top. Dengan menetapkan ketinggian div kepada 0 dan mengira bahagian atas padding berdasarkan nisbah lebar dan ketinggian imej latar belakang, div boleh meniru gelagat elemen img, mengubah saiz secara automatik agar sesuai dengan imej latar belakang.

Contoh Kod:

Pertimbangkan CSS berikut kod:

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

Dalam contoh ini, div akan mengubah saiz secara automatik berdasarkan perkadaran imej latar belakang (1280px lebar x 853px tinggi), dalam kes ini, nisbah 66.64%. Dengan menetapkan ketinggian kepada 0 dan menggunakan padding-top sebagai peratusan, div akan kelihatan seolah-olah ketinggiannya dilaraskan secara automatik.

Teknik ini menghilangkan keperluan untuk menetapkan ketinggian atau ketinggian min secara manual. div dan menyediakan penyelesaian dinamik untuk imej pelbagai saiz.

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