How to make a DIV adjust its height according to the background image?

Question

How to make a DIV adjust its height according to the background image?

.guaraparivirtual-guiacomercial-banner {
position:relative;
width:900px;
height:auto;
float:left;
background-color:#dddddd;
background-image:url(img-guaraparivirtual/icone-whatsapp.png);
background-repeat:no-repeat;
background-origin:border-box;
background-size:auto;
}

In this CSS above is what I use, but it doesn’t work. I need the DIV to automatically undetect the background image height and adjust.

I’m waiting for help!

Answer 1

I believe it is not possible using only CSS, but you may be doing so:

HTML

<div class="guaraparivirtual-guiacomercial-banner">
    <img src="img-guaraparivirtual/icone-whatsapp.png" />
</div>

CSS

.guaraparivirtual-guiacomercial-banner {
    position:relative;
    float:left;
    padding:0;
    background-color:#dddddd;
}

Placing the image with HTML, and thus placing it inside a DIV, da para dizer que a DIV se ajustará automaticamente.

If you want to give up to apply some effects in the DIV, for you to take the test and see that really the div is adapting:

CSS

.guaraparivirtual-guiacomercial-banner {
    position:relative;
    float:left;
    padding:0;
    background-color:#dddddd;
    /* efeitos de exemplo para o teste */
    box-shadow: 0 1px 5px #333;
    border: 3px solid #eee;
}