i have div and i want to set div height dependent on background-image height

Question

I have a dynamic JS code that changes the background image of div on each click. How can I change div height and width dependent on the image size?

Here is my code for better understanding my problem:

element.style {
    background: rgba(0, 0, 0, 0) url("../wp-content/uploads/ssf-wp-uploads/images/24/image.jpg") no-repeat scroll center center;
    cursor: pointer;
    height: 150px;
    position: relative;
}

Here I set a fix size 150px but background image size can change. So I want to set div height depending on background image height .

Changing the size of the div is likely to break the layout of your page...are you sure that's what you want to do? — Paulie_D, Aug 14 '15 at 11:46
actually i am working on map and open a a pop-up information after click on each marker .. — Anubhav Singh, Aug 14 '15 at 11:47
I'm not sure what that means or how it's relevant. Are you opening different pop-ups every time each with their own bg image? — Paulie_D, Aug 14 '15 at 11:49
What about just using a `` with the url of the background image? It resizes automatically... (and you can still apply css filters and stuff to it) — Dominik Schreiber, Aug 14 '15 at 11:51
yes i change the BG image on each pop-up . the BG image size not fix . that's why i am asking . look here for more clear . — Anubhav Singh, Aug 14 '15 at 11:51
here i fix 150px height for div . but my background image may be big or small so i want set this div height depend on BG image — Anubhav Singh, Aug 14 '15 at 11:53
Have a look at this solution: [How to get div height to auto-adjust to background size?][1] [1]: http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size — Ludo, Aug 14 '15 at 11:54
yes but not what i want . because that code unless using img tag . if i am using img tag . no need to background image . i am using bg image and can't change it .. — Anubhav Singh, Aug 14 '15 at 11:57
One quick suggestion would be to scale down your image and place it in your fix size div....So your div size need not be dynamic and gui looks perfect, — cafebabe1991, Aug 14 '15 at 12:12

score 1 · Answer 1 · edited May 23 '17 at 11:58

Since you have mentioned that you want to get div height to auto-adjust to background image, Note that, A background image has no effect on the size of the div it is declared in.

div{
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

This is a trick to make a background image work like a img. For a better understanding on how the size of the image should be known before hand, I recommend reading the author's answer in detail along with the comments here: How to get div height to auto-adjust to background size?

score 0 · Accepted Answer · edited May 23 '17 at 12:14

CSS

.elementstyle{
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-size: contain;

}

In jQuery:

var img= $('img');

img.removeAttr("width");
img.removeAttr("height");

var img_width = img.width();
var img_height = img.height();

$('.elementstyle').width(img_width).height(img_height);

Edit: I've just noticed that you're asking to get the size of the background image from the CSS. The method above would grab attributes from:

<div class="elementstyle"><img src=""/></div>

You'll have to look into defining the size of the background-image within jQuery. Here's some reading material.

can u please change in my code . actually i don't have more knowledge about css — Anubhav Singh, Aug 14 '15 at 12:10

i have div and i want to set div height dependent on background-image height

2 Answers2