Comment pouvons-nous intégrer des images dans des DIV avec CSS sans perdre la flexibilité des DIV ?

Intégration d'images dans des DIV avec CSS

Question :

Les utilisateurs de CSS ont souvent recours à la configuration images comme images d’arrière-plan pour les incorporer dans les DIV. Cependant, cette approche limite la capacité du DIV à se conformer aux dimensions de l'image. Comment pouvons-nous créer un équivalent CSS à la structure HTML suivante pour résoudre ce problème ?

<code class="html"><div><img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Comment pouvons-nous intégrer des images dans des DIV avec CSS sans perdre la flexibilité des DIV ?" ></div></code>

Réponse :

Selon la solution de Jaap, nous pouvons utiliser ce qui suit technique :

HTML :

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

CSS :

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

Cette méthode utilise le CSS ::before pseudo-élément pour insérer l'image comme premier élément dans le DIV, offrant la flexibilité souhaitée en termes de taille du DIV et de dimensions de l'image.

Exemple :

Ce qui suit l'extrait de code démontre cette technique :

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

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

Ressources supplémentaires :

• Contenu CSS : https://css-tricks.com/css -content/
• La compatibilité entre navigateurs a été confirmée sur Chrome, Firefox et Safari. Veuillez signaler tout résultat IE pour inclusion dans cette réponse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!