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?
<img>
<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?Respostas:
Esta resposta de Jaap :
e em CSS:
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)
fonte
div
tirar 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.você consegue fazer isso:
e coloque isso em seu arquivo css:
caso contrário, apenas use-os como simples
fonte
img
tag 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 tagstyle
e ou correspondenteimg
para aquela determinada imagem.Tome isso como um código de amostra. Substitua a altura e largura da imagem pelas dimensões da imagem.
fonte
Com Javascript / Jquery:
img
div
e definir largura, altura e fundoremova o original
img
fonte