CODEWITHSUNDEEP
jquerycssimage
Nathan Campos
Nathan Campos

Reputation: 29507

Detect The Height of an Image

I have several images(that have different sizes) on my project and to improve the layout of the page I've set this CSS for those images:

#Banners {
    max-width: 250px;
    max-height: 350px;

    border: 1px solid #fff;
    box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
}

.float {
    float: left;
}

But some images are smaller than 350px and the container they are in has the min-height set to 360px, then it lefts a blank space on my page. So I want to get the actual height of the image(the height after passing the CSS code) and set the container min-height equal to the image height using jQuery. How to get the image height after being passed through the CSS?

Upvotes: 0

Views: 139

Answers (1)

John Poulin
John Poulin

Reputation: 71

The code below should do it, however I'm not sure why you need to set the min-height equal to the height of the image.

$(document).ready(function () {
    $("#Banners").css("min-height", $("#img_id").outerHeight());
});

Upvotes: 1

Related Questions