Wie können wir Bilder mit CSS in DIVs einbetten, ohne die DIV-Flexibilität zu verlieren?

Bilder in DIVs mit CSS einbetten

Frage:

CSS-Benutzer greifen oft auf die Einstellung zurück Bilder als Hintergrundbilder, um sie in DIVs einzubinden. Dieser Ansatz schränkt jedoch die Fähigkeit des DIV ein, sich an die Bildabmessungen anzupassen. Wie können wir ein CSS-Äquivalent zur folgenden HTML-Struktur erstellen, um dieses Problem zu beheben?

<code class="html"><div><img  src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Wie können wir Bilder mit CSS in DIVs einbetten, ohne die DIV-Flexibilität zu verlieren?" ></div></code>

Antwort:

Gemäß Jaaps Lösung können wir Folgendes verwenden Technik:

HTML:

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

CSS:

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

Diese Methode verwendet das CSS ::before Pseudoelement, um das Bild als erstes Element innerhalb des DIV einzufügen und so die gewünschte Flexibilität in Bezug auf DIV-Größe und Bildabmessungen bereitzustellen.

Beispiel:

Das Folgende Codeausschnitt demonstriert diese Technik:

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

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

Zusätzliche Ressourcen:

• CSS-Inhalt: https://css-tricks.com/css -content/
• Die browserübergreifende Kompatibilität wurde für Chrome, Firefox und Safari bestätigt. Bitte melden Sie alle IE-Ergebnisse zur Aufnahme in diese Antwort.

Das obige ist der detaillierte Inhalt vonWie können wir Bilder mit CSS in DIVs einbetten, ohne die DIV-Flexibilität zu verlieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!