Verwenden von CSS zum Anzeigen von Bildern in Divs
Wenn es darum geht, Bilder in Divs anzuzeigen, scheint die Verwendung von Hintergrundbildern der einfachste Ansatz zu sein . Diese Methode stellt jedoch eine Einschränkung dar, da sie verhindert, dass das Div seine Größe an das Bild anpasst.
Um diese Einschränkung zu überwinden und die gewünschte Funktionalität von HTML zu erreichen, ist
Lösung:
Implementieren Sie ein
<code class="css"><div class="image"></div></code>
Definieren Sie in Ihrem CSS ein Pseudoelement für das
<code class="css">div.image::before {
content: url(http://placehold.it/350x150);
}</code>Zusätzliche Informationen:
Die Content-Eigenschaft ermöglicht das dynamische Einfügen von Inhalten in ein Pseudo- Element, einschließlich Bilder. Durch Verweisen auf die Bild-URL innerhalb dieser Eigenschaft können Sie das Bild innerhalb des Div anzeigen.
Ausführliche Informationen zur Verwendung von CSS zur Implementierung dieser Lösung finden Sie in der folgenden Ressource:
Kompatibilität:
Der vorgestellte Ansatz wurde erfolgreich in Chrome, Firefox und Safari auf einem Mac-Betriebssystem getestet. Um die Kompatibilität zwischen verschiedenen Browsern sicherzustellen, wird empfohlen, die Funktionalität in verschiedenen Umgebungen zu überprüfen.
Das obige ist der detaillierte Inhalt vonWie zeige ich Bilder in Divs mit CSS ohne Hintergrundbilder an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
