Question

I have an image on a page that I would like to set the height of that equal to the parent container. If you take this page for example, http://myrtlebeachgolfpackages.com/packages/ ,the main images on the left, I want to fill the height 100% of their respective divs.

So my thought is to grab the height of the parent container and set the height of the image equal to that parent container.

$(".packagepic").height($('this').parent().parent().height());

The layout is basically

<div>
    <a>
        <image class="packagepic">
    </a>
</div>

which is why I am grabbing parent().parent().

However, of course you can see this is not working. Please also note that I cant set the height of ALL the divs to one height, or ALL the images to a certain height because the height of their respective divs changes depending on the package.

Any thoughts on this?

Answer 1

You can use the function http://api.jquery.com/height/

$(".packagepic").height(function () {
    return $(this).parent().parent().height();
});