comment mettre une image en div avec css

Question

Je voudrais avoir toutes mes images en css mis (le seul moyen que je sais comment est comme image de fond).
mais le problème dans cette solution est que vous ne pouvez jamais laisser la div prendre la taille de l'image.

Ma question est donc la suivante: quel est le meilleur moyen d’avoir l’équivalent de <div><img src="..." /></div> en CSS

Je vous remercie

Answer 1

Cette réponse par Jaap :

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

et dans le CSS :

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

vous pouvez l'essayer sur ce lien : http://jsfiddle.net/XAh2d/

c'est un lien à propos de css contenu http://css-tricks.com/css-content/

Cela a été testé sur Chrome, firefox et Safari. (Je suis sur un mac, donc si quelqu'un a le résultat sous IE, dites-moi de l'ajouter)

Answer 2

tu peux le faire:

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

et mettez ceci dans votre fichier css:

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

sinon, utilisez-les simplement

Answer 3

Avec Javascript / Jquery:

• charger l'image avec img caché
• quand l'image a été chargée, obtenez la largeur et la hauteur
• créer dynamiquement un div et définir la largeur, la hauteur et l'arrière-plan

• supprimer l'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");
    });
   

Answer 4

Prenez ceci comme exemple de code. Remplacez la hauteur et la largeur de l'image par les dimensions de votre image.

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