Bagaimanakah kita boleh Membenamkan Imej dalam DIV dengan CSS tanpa kehilangan fleksibiliti DIV?

Membenamkan Imej dalam DIV dengan CSS

Soalan:

Pengguna CSS sering menggunakan tetapan imej sebagai imej latar belakang untuk menggabungkannya ke dalam DIV. Walau bagaimanapun, pendekatan ini mengehadkan keupayaan DIV untuk mematuhi dimensi imej. Bagaimanakah kita boleh mencipta CSS bersamaan dengan struktur HTML berikut untuk menangani isu ini?

<code class="html"><div><img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Bagaimanakah kita boleh Membenamkan Imej dalam DIV dengan CSS tanpa kehilangan fleksibiliti DIV?" ></div></code>

Jawapan:

Menurut penyelesaian Jaap, kami boleh menggunakan perkara berikut teknik:

HTML:

<code class="html"><div class="image"></div></code>

CSS:

<code class="css">div.image::before {
   content: url(image-url);
}</code>

Kaedah ini menggunakan CSS ::sebelumnya unsur pseudo untuk memasukkan imej sebagai elemen pertama dalam DIV, memberikan fleksibiliti yang diingini dari segi saiz DIV dan dimensi imej.

Contoh:

Yang berikut coretan kod menunjukkan teknik ini:

<code class="html"><div class="image"></div></code>

<code class="css">div.image::before {
   content: url("https://placehold.it/350x150");
}</code>

Sumber Tambahan:

• Kandungan CSS: https://css-tricks.com/css -content/
• Keserasian merentas penyemak imbas telah disahkan pada Chrome, Firefox dan Safari. Sila laporkan sebarang keputusan IE untuk dimasukkan dalam respons ini.

Atas ialah kandungan terperinci Bagaimanakah kita boleh Membenamkan Imej dalam DIV dengan CSS tanpa kehilangan fleksibiliti DIV?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!