Bagaimanakah Saya Boleh Menjadikan Ketinggian Div Responsif kepada Imej Latar Belakangnya?

Ketinggian Div Responsif dengan Imej Latar Belakang

Memperluas konsep imej responsif, teknik yang sama boleh digunakan pada div untuk menyesuaikannya secara automatik ketinggian berdasarkan saiz imej latar belakang mereka. Tanpa menetapkan ketinggian atau ketinggian minimum secara eksplisit, ini boleh mencipta reka letak yang cair dan dinamik.

Penyelesaian

Untuk mencapai matlamat ini, kita boleh memanfaatkan kuasa bahagian atas pelapik . Dengan menetapkan ketinggian div kepada 0 dan memanipulasi nilai padding-top sebagai peratusan, kita boleh meniru gelagat elemen imej.

Berikut ialah pecahan kod:

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

• Tetapkan sifat imej latar belakang dengan URL imej yang diingini.
• Gunakan saiz latar belakang: mengandungi untuk memastikan imej muat dalam div tanpa memutarbelitkan nisbah bidangnya.
• Tetapkan ulang latar belakang kepada tiada ulangan untuk mengelakkan imej daripada berjubin.
• Tetapkan lebar kepada 100% untuk gelagat lebar penuh.
• Kekalkan ketinggian pada 0 untuk mengalih keluar sebarang kekangan ketinggian paksa.
• Kira nilai padding-top sebagai nisbah ketinggian imej kepada lebar imej didarab dengan lebar bekas. Ini memastikan ketinggian div dilaraskan dengan sewajarnya.

Contoh

Pertimbangkan div berikut menggunakan teknik ini, di mana imej adalah tinggi 853 piksel dan lebar 1280 piksel:

<div>

Div ini akan melaraskan ketinggiannya secara automatik berdasarkan saiz imej ia mengandungi, mencipta elemen reka letak yang responsif dan dinamik.

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