Como colocar uma imagem em div com CSS?

97

Eu gostaria de ter todas as minhas imagens em CSS (a única maneira que sei é colocá-las como imagens de fundo).

Mas o problema com essa solução é que você nunca pode permitir que o div tome o tamanho da imagem.

Então minha pergunta é: qual a melhor maneira de ter o equivalente <div><img src="..." /></div>em CSS?

css image Dany Y
fonte
6
Os fundos não são uma alternativa: os fundos devem ser usados ​​se as imagens não forem relevantes para a compreensão do conteúdo, caso contrário, devem ser tão regulares<img>
Fabrizio Calderan
Além de descobrir manualmente o tamanho da imagem e dar ao div o mesmo, não acho que você possa.
Jawad
O caminho certo: <img>se a imagem for relevante, <div>com fundo se a imagem for apenas um colírio para os olhos. Se o tamanho da imagem for variável e importante, você deve usar <img>. Por que você quer usar o fundo?
Alessandro Pezzato

Respostas:

134

Esta resposta de Jaap :

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

e em CSS: 

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

você pode tentar neste link: http://jsfiddle.net/XAh2d/

este é um link sobre o conteúdo css http://css-tricks.com/css-content/

Isso foi testado no Chrome, Firefox e Safari. (Estou em um mac, então se alguém tiver o resultado no IE, diga-me para adicioná-lo)

Dany Y
fonte
Isso não significa divtirar o mesmo tamanho da imagem, como você pediu. Veja o que acontece se você adicionar uma borda a div: jsfiddle.net/XAh2d/6 Nada, porque a div tem o tamanho 0x0 e está oculta atrás da imagem.
Alessandro Pezzato
você deve remover o: antes, eu editei minha resposta. verifique aqui jsfiddle.net/2pFhc
Dany Y
2
@DanyY ei, você disse que atualizou seu violino, mas vejo apenas bordas verdes lá: jsfiddle.net/2pFhc por quê?
Sharikov Vladislav
3
Isso não funcionou para mim no firefox 55. Precisa de alguma decisão de crossbrowser. Funciona com antes | depois.
Marselo Bonagi
1
funciona para mim no FF e no cromo com :: before e display: flex; => jsfiddle.net/q0vL1m7v/1
Catweazle
21

você consegue fazer isso:

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

e coloque isso em seu arquivo 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 */
}

caso contrário, apenas use-os como simples

JudeJitsu
fonte
Eu estava tentando evitar tamanhos fixos.
Dany Y
Se você está tentando evitar tamanhos fixos, a maneira mais fácil é usar a imgtag simples . O que você está tentando realizar com isso? Talvez haja outra solução programaticamente, como obter o tamanho da imagem por meio de getimagesize do PHP e, em seguida, ecoar uma tag stylee ou correspondente imgpara aquela determinada imagem.
JudeJitsu
5

Tome isso como um código de amostra. Substitua a altura e largura da imagem pelas dimensões da imagem.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
Tabrez Ahmed
fonte
Funciona, mas a dúvida era sobre "CSS"
Michael Biermann,
Talvez não devesse.
jasonleonhard
5

Com Javascript / Jquery:

  • carregar imagem com oculto img
  • quando a imagem for carregada, obtenha largura e altura
  • criar dinamicamente um dive definir largura, altura e fundo

  • remova o 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
fonte