web-dev-qa-db-fra.com

Comment mettre une image en div avec CSS?

Je voudrais avoir toutes mes images en CSS (la seule façon que je sais, c'est de les mettre en arrière-plan).

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?

cssimage
87
Dany Y

Cette réponse par Jaap :

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

et en CSS:

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

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

ceci est un lien sur le contenu css 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 sur IE, dites-moi de l'ajouter)

115
Dany Y

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

18
JudeJitsu

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");
  });
5
Alessandro Pezzato

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