This question has already been answered:

Created a div element, set it to width width 50% . Through CSS, I inserted a picture into it using the background-image: url(....jpg); property background-image: url(....jpg); . At the same time, the height of the div remained 0px . How to make it automatically adjust to the height of the picture?

Reported as a duplicate by members of Cheg , Pavel Mayorov , Дух , Community Spirit ♦ 14 Oct '17 at 15:30 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • css without changing the logic in any way. - MedvedevDev
  • one
    background-image is made to not affect the size of the container - andreymal

1 answer 1

To get the result, you need to explicitly pull up the div to the height of the desired image, but the image does not have to be shown:

 <div id="out"> <img src="bg_test.png" style="visibility: hidden;" /> </div>

In order to add something useful in this block, we will add another div :

 <div id="out"> <img src="bg_test.png" id="template" /> <div id="int">Внутренний блок с полезной нагрузкой</div> </div>

And the style sheet:

 img#template{ visibility: hidden; position: relative; } div#out { width:30%; background-image:url('bg_test.png'); height:auto; float: left; position: relative; } div#int { position: absolute; top:0; left:0; }