How to make a div have the dimension of an image and display it?

Question

When declaring a div and importing an image as background-image, it is necessary that I declare the size(height and width) of the div.

However, let’s say I have an image with the size 900x506(example). And I just declared div and assigns no size(height and width) to her.

It is possible for me to import the image via css background-image: url('minhaimagem.jpg'); and my div will automatically display it, even though I have not assigned any size(height and width) to her?

(I do not know if it was very clear, another explanation..)

Is it possible for me to declare a div, import an image as backgroundand my div "take" the values of my image(height and width)?

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

<div id="imagem">

</div>

Answer 1

unfortunately you will not be able to do this only with css, you will need Avascript.

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>

Answer 2

There is a very easy way to do this. You need to know the image width and height ratio. Set the height of the div to 0 and set the padding-top as a percentage based on the image ratio.

#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>