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

Cara Mencapai Pelarasan Ketinggian Div Dinamik Berdasarkan Saiz Latar Belakang

Elemen Div memainkan peranan penting dalam reka bentuk web, membolehkan pembangun membuat yang fleksibel dan susun atur responsif. Walau bagaimanapun, apabila ia datang untuk menetapkan ketinggian div agar sepadan dengan saiz imej latar belakangnya tanpa mentakrifkan nilai ketinggian tertentu secara eksplisit, ia boleh menjadi satu cabaran.

Pernyataan Masalah

Bagaimanakah div boleh dikonfigurasikan untuk melaraskan ketinggiannya secara automatik berdasarkan dimensi latar belakang yang ditetapkan imej?

Jawapan

Untuk mencapai pelarasan yang lancar ini, pendekatan bijak melibatkan memanfaatkan nisbah bidang imej dan sifat CSS "padding-top". Begini cara ia berfungsi:

Tetapkan ketinggian div kepada 0, pada asasnya menjadikannya tidak kelihatan.
Kira nisbah peratusan ketinggian imej kepada lebar.
Tetapkan sifat padding-top bagi div kepada nilai peratusan ini.
Contoh CSS Kod:

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

Penjelasan:

• Sifat padding-top meregangkan div secara menegak, mengekalkan nisbah bidang imej.
• Ketinggian div kekal 0, membolehkannya mengembang atau mengecut secara dinamik berdasarkan imej saiz.

Contoh Berfungsi

Berikut ialah prototaip yang mempamerkan teknik ini dalam tindakan: http://jsfiddle.net/8m9ur5qj/.

Dengan mengikuti pendekatan ini, anda boleh mencipta elemen div yang melaraskan ketinggiannya dengan mudah agar sepadan dengan saiz imej latar belakangnya, memastikan reka letak yang harmoni secara visual dan responsif.

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