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

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