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

Navigation
0

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 does not work. I need the DIV to automatically detect the height of the background image and adjust.

I look forward to helping you!

    
asked by anonymous 10.05.2016 / 17:59

1 answer

1

I think it's not possible to use CSS only, but you might be doing this:

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 putting it inside a DIV, you can say that the DIV will adjust automatically.

If you want to even apply some effects to the DIV, for you to test and see what the div is really 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;
}
    
10.05.2016 / 18:08
include with html file Check start and end date and insert text between them!