CODEWITHSUNDEEP
javascriptjqueryhtml
user1617218
user1617218

Reputation:

Apply children image width and height to container

I have this markup:

    <div class="img_container">
        <img src="file://localhost/img/a_bg.jpeg" alt="a_bg" />
    </div>

How can I apply the width and height of the image to the img_container?

The image is on position absolute

Upvotes: 1

Views: 118

Answers (3)

David Thomas
David Thomas

Reputation: 253318

Untested, but I'd suggest:

$('.img_container img').each(function(){
    var w = this.naturalWidth,
        h = this.naturalHeight;
    $(this).parent().css({'height': h, 'width' : w});
});

Upvotes: 1

Mollo
Mollo

Reputation: 723

Try this

<img src="file://localhost/img/a_bg.jpeg" alt="a_bg width="X" height="Y" />

And add this to you CSS

background-image: url(file://localhost/img/a_bg.jpeg);
background-size: Xpx Ypx;
background-repeat:no-repeat;

Upvotes: 0

Bhushan Firake
Bhushan Firake

Reputation: 9458

Markup:

You will need to add an id to the image as below:

<div class="img_container">
        <img id="bgimg" src="file://localhost/img/a_bg.jpeg" alt="a_bg" />
    </div>

Jquery:

var img = $('#bgimg'); 

img.load(function(){
     //Get width of image
     var width = img.width();
     //Get height of image
     var height = img.height();
     $('.img_container').css("width", width);
     $('.img_container').css("height", height);
});

Upvotes: 0

Related Questions