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
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

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
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
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
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
source