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

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