Wie füge ich ein Bild mit CSS in div ein?

97

Ich möchte alle meine Bilder in CSS haben (die einzige Möglichkeit, die ich kenne, besteht darin, sie als Hintergrundbilder einzufügen).

Das Problem bei dieser Lösung ist jedoch, dass Sie niemals zulassen können, dass der Div die Größe des Bildes annimmt.

Meine Frage lautet also: Was ist der beste Weg, um das Äquivalent zu <div><img src="..." /></div>CSS zu haben?

css image Dany Y.
quelle
6
Hintergründe sind keine Alternative: Hintergründe müssen verwendet werden, wenn Bilder für das Inhaltsverständnis nicht relevant sind, andernfalls sollten sie so regelmäßig sein<img>
Fabrizio Calderan
Abgesehen davon, dass Sie die Größe des Bildes manuell herausfinden und dem Div das gleiche geben, glaube ich nicht, dass Sie das können.
Jawad
Der richtige Weg: <img>Wenn das Bild relevant ist, <div>mit Hintergrund, wenn das Bild nur eine Augenweide ist. Wenn die Bildgröße variabel und wichtig ist, sollten Sie verwenden <img>. Warum möchten Sie Hintergrund verwenden?
Alessandro Pezzato

Antworten:

133

Diese Antwort von Jaap :

<div class="image"></div>​

und in CSS: 

div.image {
   content:url(http://placehold.it/350x150);
}​

Sie können es über diesen Link versuchen: http://jsfiddle.net/XAh2d/

Dies ist ein Link zum CSS-Inhalt http://css-tricks.com/css-content/

Dies wurde auf Chrome, Firefox und Safari getestet. (Ich bin auf einem Mac. Wenn also jemand das Ergebnis im IE hat, sag mir, ich soll es hinzufügen.)

Dany Y.
quelle
Dadurch wird nicht divdie gleiche Größe des Bildes aufgenommen, wie Sie gefragt haben. Schauen Sie, was passiert, wenn Sie div einen Rahmen hinzufügen: jsfiddle.net/XAh2d/6 Nichts, da das div die Größe 0x0 hat und hinter dem Bild versteckt ist.
Alessandro Pezzato
Sie sollten das entfernen: vorher habe ich meine Antwort bearbeitet. Überprüfen Sie es hier jsfiddle.net/2pFhc
Dany Y
2
@DanyY Hey, du hast gesagt, du hast deine Geige aktualisiert, aber ich sehe dort nur grüne Ränder: jsfiddle.net/2pFhc warum?
Sharikov Vladislav
3
Bei Firefox 55 hat dies bei mir nicht funktioniert. Benötigen Sie eine Crossbrowser-Entscheidung? Funktioniert mit vorher | nachher.
Marselo Bonagi
1
funktioniert für mich auf FF und Chrome mit :: before und display: flex; => jsfiddle.net/q0vL1m7v/1
Catweazle
21

du kannst das:

<div class="picture1">&nbsp;</div>

und legen Sie dies in Ihre CSS-Datei:

div.picture1 {
   width:100px; /*width of your image*/
   height:100px; /*height of your image*/
   background-image:url('yourimage.file');
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
}

Andernfalls verwenden Sie sie einfach als normal

JudeJitsu
quelle
Ich habe versucht, feste Größen zu vermeiden.
Dany Y
Wenn Sie versuchen, feste Größen zu vermeiden, ist es am einfachsten, das einfache imgTag zu verwenden. Was versuchst du damit zu erreichen? Möglicherweise gibt es programmgesteuert eine andere Lösung, z. B. das Abrufen der Bildgröße über PHP getimagesize und das Echo eines entsprechenden styleund / oder imgTags für dieses bestimmte Bild.
JudeJitsu
5

Nehmen Sie dies als Beispielcode. Ersetzen Sie Bildhöhe und Bildbreite durch Ihre Bildabmessungen.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
Tabrez Ahmed
quelle
Funktioniert aber die Frage betraf "CSS"
Michael Biermann
Vielleicht sollte es nicht.
Jasonleonhard
5

Mit Javascript / Jquery:

  • Bild mit versteckt laden img
  • Wenn das Bild geladen wurde, erhalten Sie Breite und Höhe
  • Erstellen Sie dynamisch eine divund legen Sie Breite, Höhe und Hintergrund fest

  • Entfernen Sie das Original img

      $(document).ready(function() {
    var image = $("<img>");
    var div = $("<div>")
    image.load(function() {
      div.css({
        "width": this.width,
        "height": this.height,
        "background-image": "url(" + this.src + ")"
      });
      $("#container").append(div);
    });
    image.attr("src", "test0.png");
  });
Alessandro Pezzato
quelle