Resize a div element to its background image size

Question

Is it possible to make a

adapt to its background image? I mean to maintain the proportions width and height.

Clarification:

Answer 1

No it is NOT possible to adapt a div to it's background image.

Because it is 'senseless'

This is how:

A div's size is determined by its "content", or if its dimensions are SPECIFICALLY set. Since the background-image does not fall into any of these categories, you can see that it's impossible.

What you CAN do is this:

HTML

  ...
  
...

CSS

 .image-controlled {
   position: relative; 
   overflow: hidden <-- optional, if you want to cut off .content which overflows the image boundaries
 }
 .content {
   position: absolute;
   top: 0; left: 0; <-- position of the content as it should be (normally)
 }

The div will now be the size of the image, and the .content will be shown over it.

---

Also note that the .content div can come above or below the in order of appearance, but the effect would be the same. But, if you apply a position property on the img element too, then you'll need to set the z-index of .content greater than that of