Come mettere un'immagine in div con CSS?

97

Vorrei avere tutte le mie immagini in CSS (l'unico modo che conosco è inserirle come immagini di sfondo).

Ma il problema in questa soluzione è che non puoi mai lasciare che il div prenda le dimensioni dell'immagine.

Quindi la mia domanda è: qual è il modo migliore per avere l'equivalente <div><img src="..." /></div>in CSS?

css image

— Dany Y
fonte

6

Gli sfondi non sono un'alternativa: gli sfondi devono essere utilizzati se le immagini non sono rilevanti per la comprensione del contenuto, altrimenti dovrebbero essere regolari<img>

— Fabrizio Calderan

Oltre a scoprire manualmente la dimensione dell'immagine e dare lo stesso div, non credo che tu possa.

— Jawad

Il modo giusto: <img>se l'immagine è rilevante, <div>con lo sfondo se l'immagine è solo un piacere per gli occhi. Se la dimensione dell'immagine è variabile e importante, dovresti usare <img>. Perché vuoi usare lo sfondo?

— Alessandro Pezzato

134

Questa risposta di Jaap :

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

e in CSS:

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

puoi provarlo su questo link: http://jsfiddle.net/XAh2d/

questo è un collegamento sui contenuti css http://css-tricks.com/css-content/

Questo è stato testato su Chrome, Firefox e Safari. (Sono su un Mac, quindi se qualcuno ha il risultato su IE, dimmi di aggiungerlo)

— Dany Y
fonte

Questo non fa divprendere la stessa dimensione dell'immagine, come hai chiesto. Guarda cosa succede se aggiungi un bordo a div: jsfiddle.net/XAh2d/6 Nothing, perché il div ha dimensione 0x0 ed è nascosto dietro l'immagine.

— Alessandro Pezzato

dovresti rimuovere: prima, ho modificato la mia risposta. controlla qui jsfiddle.net/2pFhc

— Dany Y

2

@DanyY hey, hai detto di aver aggiornato il violino, ma vedo solo i bordi verdi: jsfiddle.net/2pFhc perché?

— Sharikov Vladislav

3

Questo non ha funzionato per me su Firefox 55. Serve qualche decisione crossbrowser. Funziona con prima | dopo.

— Marselo Bonagi

1

funziona per me su FF e chrome con :: before e display: flex; => jsfiddle.net/q0vL1m7v/1

— Catweazle

21

Puoi farlo:

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

e inseriscilo nel tuo file 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 */
}

altrimenti, usali semplicemente come semplici

— JudeJitsu
fonte

Stavo cercando di evitare dimensioni fisse.

— Dany Y

Se stai cercando di evitare dimensioni fisse, il modo più semplice è utilizzare il imgtag normale . Cosa stai cercando di ottenere con questo? Forse esiste un'altra soluzione in modo programmatico, come ottenere la dimensione dell'immagine tramite PHP getimagesize e quindi eseguire l'eco di un tag stylee o corrispondente imgper quella determinata immagine.

— JudeJitsu

5

Prendi questo come un codice di esempio. Sostituisci l'altezza e la larghezza dell'immagine con le dimensioni dell'immagine.

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

— Tabrez Ahmed
fonte

Funziona ma la domanda riguardava "CSS"

— Michael Biermann

Forse non dovrebbe.

— jasonleonhard

5

Con Javascript / Jquery:

carica l'immagine con nascosto img
quando l'immagine è stata caricata, ottieni larghezza e altezza
creare dinamicamente dive impostare larghezza, altezza e sfondo

rimuovere l'originale 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
fonte