Hoe zet je een afbeelding in div met CSS?

Ik zou graag al mijn afbeeldingen in CSS willen hebben (de enige manier die ik weet is om ze als achtergrondafbeeldingen in te voegen).

Maar het probleem met deze oplossing is dat je de div nooit de grootte van de afbeelding kunt laten nemen.

Dus mijn vraag is: wat is de beste manier om het equivalent van
<div><img src="..." /></div>in CSS?

Antwoord 1, autoriteit 100%

Dit antwoord van Jaap:

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

en in CSS:

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

je kunt het proberen via deze link:
http://jsfiddle.net/XAh2d/

dit is een link over css-inhoud
http://css-tricks.com/css-content/

Dit is getest in Chrome, Firefox en Safari. (Ik gebruik een Mac, dus als iemand het resultaat op IE heeft, zeg me dan om het toe te voegen)

Antwoord 2, autoriteit 15%

u kunt dit doen:

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

en zet dit in je css-bestand:

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 */
}

anders, gebruik ze gewoon als gewoon

Antwoord 3, autoriteit 3%

Neem dit als voorbeeldcode. Vervang afbeeldingshoogte en afbeeldingsbreedte door uw afbeeldingsafmetingen.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>

Antwoord 4, autoriteit 3%

Met Javascript/JQuery:

• afbeelding laden met verborgen img
• wanneer de afbeelding is geladen, de breedte en hoogte opvragen
• maak dynamisch een diven stel de breedte, hoogte en achtergrond in

• verwijder de originele 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");
    });