Wie bette ich Bilder mithilfe der CSS-Inhaltseigenschaft in Divs ein?

Einbinden von Bildern in Divs mithilfe von CSS

Viele Benutzer suchen nach einer Lösung, um Bilder in Divs im CSS-Stil anzuzeigen und gleichzeitig die Anpassung des Divs zu ermöglichen die Abmessungen des Bildes. Dieser Artikel befasst sich mit diesem Problem und bietet eine effiziente Methode zum Replizieren der Funktionalität des HTML-Elements

Die vorgeschlagene Technik beinhaltet die Verwendung der Content-Eigenschaft in CSS, um das gewünschte Bild in ein Div einzufügen. So geht's:

1. Erstellen Sie ein div-Element mit einer bestimmten Klasse, zum Beispiel:

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

   Nach dem Login kopieren

2. Wenden Sie im CSS an Folgender Stil für die Klasse:

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

   Nach dem Login kopieren

In diesem Beispiel stellt http://placehold.it/350x150 die URL des Bildes dar.

Dieser Ansatz bettet effektiv das ein Bild in das Div, wobei die Fähigkeit des Divs erhalten bleibt, seine Größe relativ zum Bild anzupassen. Um eine Live-Demonstration anzusehen, besuchen Sie den folgenden Link: http://jsfiddle.net/XAh2d/.

Weitere Informationen finden Sie unter http://css-tricks.com/css-content/ umfassende Anleitung zu CSS-Inhalten.

Kompatibilität:

Diese Technik wurde erfolgreich auf Chrome, Firefox und Safari (MacOS) getestet. Bitte teilen Sie Ihre Erfahrungen mit dem Internet Explorer, falls vorhanden.

Das obige ist der detaillierte Inhalt vonWie bette ich Bilder mithilfe der CSS-Inhaltseigenschaft in Divs ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!