Bagaimanakah Saya Boleh Membuat Div Pembalut Melaraskan Lebarnya Secara Dinamik agar Padan dengan Lebar Imej Anaknya?

Buat Pembungkus Disesuaikan dengan Lebar Imej Kanak-kanak

Masalah:

Matlamatnya adalah untuk mereka bentuk pembalut yang melaraskan lebarnya secara dinamik berdasarkan lebar imej anaknya. Dalam erti kata lain, pembalut tidak sepatutnya mempunyai lebar tetap tetapi hanya perlu menampung lebar imej yang terkandung.

Contoh:

Kod yang disediakan mempamerkan imej yang dibalut dalam div pembalut bersempadan merah. Walau bagaimanapun, div pembalut pada masa ini mempamerkan lebar tetap, membawa kepada penampilan yang tidak diingini:

<div>

Objektif:

Hasil yang diingini ialah pembalut yang sepadan secara dinamik dengan lebar imej kanak-kanak, membolehkan reka letak yang menarik secara visual tanpa bertindih teks:

<div>

Penyelesaian:

Satu pendekatan tidak konvensional untuk mencapai ini melibatkan penggunaan paparan: sifat meja untuk pembungkus. Dengan menetapkan lebar pembalut kepada 1%, imej kanak-kanak akan mengatasi lebar ini dan menganggap saiz sebenar, dengan berkesan menentukan lebar pembalut.

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

Penyelesaian ini menyediakan kaedah yang mudah dan berkesan untuk mencipta pembungkus yang menyesuaikan diri dengan lebar imej kanak-kanak, memastikan reka letak yang menarik secara visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Pembalut Melaraskan Lebarnya Secara Dinamik agar Padan dengan Lebar Imej Anaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!