Wie zeige ich Bilder in Divs mit CSS ohne Hintergrundbilder an?-CSS-Tutorial-php.cn

Wie zeige ich Bilder in Divs mit CSS ohne Hintergrundbilder an?

Linda Hamilton

Freigeben： 2024-10-30 07:23:27

Original

678 Leute haben es durchsucht

How to Display Images Inside Divs Using CSS Without Background Images?

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

Struktur in CSS hat sich der folgende Ansatz als effektiv erwiesen:

Lösung:

Implementieren Sie ein

Element mit einer bestimmten Klasse, z. B. „image“.

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

Nach dem Login kopieren

Definieren Sie in Ihrem CSS ein Pseudoelement für das

Element und verwenden Sie die Content-Eigenschaft, um die Bild-URL anzugeben.

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

Nach dem Login kopieren

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:

[CSS-Tricks: CSS-Inhalte verwenden](http://css-tricks.com/css-content/)

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!

Quelle：php.cn

Vorheriger Artikel：Wie öffne ich ein Popup-Fenster in benutzerdefinierter Größe mit JavaScript? Nächster Artikel：Wie erstelle ich mehrere zusammenklappbare Divs in reinem CSS ohne umfangreichen Code?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2327

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2461

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2082

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...