Comment mettre une image en div avec CSS?

97

Je voudrais avoir toutes mes images en CSS (le seul moyen que je sache est de les mettre en arrière-plan).

Mais le problème dans cette solution est que vous ne pouvez jamais laisser le div prendre la taille de l'image.

Ma question est donc: quelle est la meilleure façon d'avoir l'équivalent <div><img src="..." /></div>en CSS?

css image Dany Y
la source
6
Les arrière-plans ne sont pas une alternative: les arrière-plans doivent être utilisés si les images ne sont pas pertinentes pour la compréhension du contenu, sinon elles devraient être aussi régulières<img>
Fabrizio Calderan
À part trouver manuellement la taille de l'image et donner la même div, je ne pense pas que vous puissiez.
Jawad
La bonne façon: <img>si l'image est pertinente, <div>avec un arrière-plan si l'image est seulement un plaisir pour les yeux. Si la taille de l'image est variable et importante, vous devez utiliser <img>. Pourquoi voulez-vous utiliser l'arrière-plan?
Alessandro Pezzato

Réponses:

134

Cette réponse de 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)

Dany Y
la source
Cela ne fait pas divprendre la même taille d'image, comme vous l'avez demandé. Regardez ce qui se passe si vous ajoutez une bordure à div: jsfiddle.net/XAh2d/6 Rien, car le div a la taille 0x0 et est caché derrière l'image.
Alessandro Pezzato
vous devez supprimer le: avant, j'ai édité ma réponse. vérifiez-le ici jsfiddle.net/2pFhc
Dany Y
2
@DanyY hé, tu as dit que tu avais mis à jour ton violon, mais je n'y vois que des bordures vertes: jsfiddle.net/2pFhc pourquoi?
Sharikov Vladislav
3
Cela n'a pas fonctionné pour moi sur Firefox 55. Besoin d'une décision crossbrowser. Fonctionne avec avant | après.
Marselo Bonagi
1
fonctionne pour moi sur FF et chrome avec :: before et display: flex; => jsfiddle.net/q0vL1m7v/1
Catweazle
21

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

JudeJitsu
la source
J'essayais d'éviter les tailles fixes.
Dany Y
Si vous essayez d'éviter les tailles fixes, le moyen le plus simple est d'utiliser la imgbalise simple . Qu'essayez-vous d'accomplir avec cela? Il existe peut-être une autre solution par programme, comme obtenir la taille de l'image via PHP getimagesize, puis faire écho à une balise styleand ou correspondante imgpour cette image.
JudeJitsu
5

Prenez ceci comme un 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>
Tabrez Ahmed
la source
Fonctionne mais la question concernait "CSS"
Michael Biermann
Peut-être que ça ne devrait pas.
jasonleonhard
5

Avec Javascript / Jquery:

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

  • retirer 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");
  });
Alessandro Pezzato
la source