2

Ao declarar uma div e importar uma imagem como background-image, é necessário que eu declare o tamanho(height e width) da div.

Entretanto, digamos que eu tenha uma imagem com o tamanho 900x506(exemplo). E que eu apenas declarei div e não atribui nenhum tamanho(height e width) a ela.

É possível eu importar a imagem via css background-image: url('minhaimagem.jpg'); e a minha div automaticamente exibí-la, mesmo eu não tendo atribuído nenhum tamanho(height e width) a ela?


(não sei se ficou muito claro, uma outra explicação..)

Tem como eu declarar uma div, importar uma imagem como backgrounde a minha div "pegar" os valores da minha imagem(height e width)?

#imagem{
	
	background-image: url('http://www.planwallpaper.com/static/images/techno_wallpaper_2_0_hd_by_gredius-d5o48do.jpg');
}
<div id="imagem">

</div>

2 Respostas 2

2

infelizmente você não vai conseguir fazer isto apenas com css, vai precisar de javaScript.

var images = document.querySelectorAll(".default-img-size");

[].forEach.call(images, function (imagem, indice) {
  var style = window.getComputedStyle(imagem, null);
  var background = style.getPropertyValue("background-image");
  var inicio = background.indexOf('(') + 1;
  var final = background.lastIndexOf(')');

  var img = document.createElement("img");
  img.src = background.substring(inicio, final);
  img.addEventListener("load", function () {    
    imagem.style.width = img.width + "px";
    imagem.style.height = img.height + "px";
  })
});
#imagem{	
  background-image: url('http://image005.flaticon.com/3/png/512/2/2612.png');
}
<div id="imagem" class="default-img-size">

</div>

5
  • O snippet não está funcionando /:
    – Zkk
    19/02/2016 às 17:03
  • aqui esta normal, qual o navegador que está utilizando? IE8? 19/02/2016 às 17:10
  • Estou utilizando o Google Chrome, não funciona. Tentei no Edge por questão dúvida e nele funcionou. Em JavaScript existe algum tipo de recurso de compatibilidade de browsers semelhante ao css (webkit e entre outros)?
    – Zkk
    19/02/2016 às 17:35
  • @Zkk, estou rodando em uma versão antiga do Chrome (35) e não estou encontrando problemas... em todo caso fiz uma pequena alteração. 19/02/2016 às 17:57
  • 1
    Testei no chrome/firefox e funcionou em ambos. 19/02/2016 às 18:09
0

Há uma maneira bem fácil de se fazer isso. Você precisa saber a largura da imagem e relação de altura. Definir a altura da div para 0 e definir o padding-top como percentagem com base na relação da imagem.

#imagem{
    background-image: url('http://www.planwallpaper.com/static/images/techno_wallpaper_2_0_hd_by_gredius-d5o48do.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-bottom: 56.22%; 
        /* (img-height / img-width) * container-width) */
        /* (506 / 900) * 100 */ 
}

<div id="imagem">

</div>
1
  • neste caso você precisa conhecer a dimensão da imagem, basicamente você fez um workaround que sofre do mesmo problema de usar o width and o height diretamente, 22/02/2016 às 11:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .