web-dev-qa-db-de.com

Wie setze ich ein Bild mit CSS in div?

Ich möchte alle meine Bilder in CSS haben (ich weiß nur, wie ich sie als Hintergrundbilder einfügen kann).

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 von <div><img src="..." /></div> In CSS zu haben?

cssimage
87
Dany Y

Diese Antwort von Jaap :

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

und in CSS:

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

sie können es auf diesem Link versuchen: http://jsfiddle.net/XAh2d/

dies ist ein Link zu CSS-Inhalten http://css-tricks.com/css-content/

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

115
Dany Y

du kannst das:

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

und füge dies in deine CSS-Datei ein:

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

18
JudeJitsu

Mit Javascript/JQuery:

  • bild mit verstecktem img laden
  • wenn das Bild geladen wurde, ermitteln Sie Breite und Höhe
  • erstelle dynamisch ein div und setze Breite, Höhe und Hintergrund

  • entferne das ursprüngliche 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");
  });
5
Alessandro Pezzato

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>
5
Tabrez Ahmed