Heim  >  Artikel  >  Web-Frontend  >  Wie bette ich ein Bild mit reinem CSS in ein Div ein?

Wie bette ich ein Bild mit reinem CSS in ein Div ein?

DDD
DDDOriginal
2024-11-01 03:14:02662Durchsuche

How to Embed an Image within a Div Using Pure CSS?

So platzieren Sie ein Bild in einem Div mithilfe von CSS

Viele Entwickler greifen darauf zurück, Bilder als Hintergrundbilder in CSS festzulegen, eine Lösung, die dies ermöglicht Lassen Sie nicht zu, dass sich das Div an die Abmessungen des Bildes anpasst. So replizieren Sie den folgenden HTML-Code mit reinem CSS:

<code class="html"><div><img src="..." /></div></code>

Lösung:

Implementieren Sie den folgenden Code:

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

CSS:

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

Zusätzliche Hinweise:

  • Diese Technik wurde auf Chrome, Firefox und Safari getestet.
  • Weitere Informationen zu CSS-Inhalten finden Sie in der folgenden Ressource: http://css-tricks.com/css-content/

Das obige ist der detaillierte Inhalt vonWie bette ich ein Bild mit reinem CSS in ein Div ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn