Bagaimanakah Saya Boleh Membuat Elemen Pembungkus Secara Automatik Melaraskan Kepada Lebar Maksimum Imej Anaknya?

Jadikan Pembungkus Mengambil Lebar Maksimum Imej Kanak-kanak?

Pengenalan:

Dalam reka bentuk tapak web , anda mungkin perlu membuat elemen pembalut yang melaraskan secara automatik kepada lebar kandungan anaknya. Ini amat berguna apabila kandungan kanak-kanak ialah imej, kerana lebarnya boleh berbeza-beza berdasarkan sumbernya.

Hasil yang Diingini:

Anda ingin mencipta elemen pembalut yang akan mengambil lebar maksimum imej anak tanpa menetapkan lebar tetap secara eksplisit. Ini memastikan bahawa pembalut tidak lebih lebar daripada yang diperlukan, sambil masih membenarkan imej dipaparkan dengan betul.

Penyelesaian:

Walaupun tidak mungkin untuk mencapai tingkah laku ini menggunakan CSS tulen, terdapat "hack" yang boleh digunakan. Dengan memaksa elemen pembungkus menjadi jadual dan menetapkan lebarnya kepada 1%, anda boleh menipu imej untuk memecahkan lebar pembungkus dan menetapkan lebarnya sendiri sebagai pembungkus. lebar.

Kod:

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

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum...</p>
</div>

Penjelasan:

Apabila paparan ditetapkan ke jadual, elemen ditukar menjadi jadual, dan elemen anak menjadi sel jadual. Walau bagaimanapun, pembalut juga diberikan lebar 1%, yang sangat kecil. Oleh itu, imej mengabaikan lebar pembalut dan menetapkan lebarnya sendiri, yang menjadi lebar sebenar pembalut.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen Pembungkus Secara Automatik Melaraskan Kepada Lebar Maksimum Imej Anaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!