CODEWITHSUNDEEP
javascriptjqueryimagecss
WASasquatch
WASasquatch

Reputation: 629

jQuery match div height with dynamic image height

I have a image which has a width set to 100% and a min-width of 1024px. I want to keep my 'shadow' div over the image, and also match it's height as the window size changes, which causes the image size to proportionately change to the window width. My current code appears to do nothing...

Template is here http://jordan.rave5.com/tmp/ you'll notice the backgroudn-overlay and background-gradient divs don't expand 100% of the document. That's another problem. Lol. I'm trying to get them to be the BG 100% width and height.

jQuery:

            $('.header-img').css('height', function(imgheight) {
                $('.image-grad').css({'height': + imgheight});
            });

CSS:

            .image-grad {
                position: absolute;
                z-index: 600;
                transition: width 2s;
                -webkit-transition: width 2s;
                width: 100%;
                min-height: 174px;
                max-height: 608px;
                background-image: url(images/header-img.png);
                background-repeat: repeat-x;
                background-position: bottom;
                top: 0;
                left: 0;
            }

            .header-img {
                position: relative;
                z-index: 500;
                width: 100%;
                min-width: 1024px;
                opacity: 0.0;
            }

HTML:

                    <img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" />
                    <div class="image-grad"></div>

How can I accomplish this?

Upvotes: 7

Views: 10506

Answers (2)

Pete
Pete

Reputation: 58422

you need to set the height of the div using .height

you can do something like the following:

http://jsfiddle.net/Q4DRp/

var imageGrad = $('.image-grad'),
    image = $('.header-img');

function resizeDiv () {
    imageGrad.height(image.height());
    imageGrad.width(image.width());
}

resizeDiv();

$(window).resize(function() { resizeDiv(); });

Upvotes: 4

Mysteryos
Mysteryos

Reputation: 5791

This will help you resize your shadow image:

Solution (Not tested)

$('.image-grad').css('height', $('.header-img').attr('height'));

To get the height of your image, use .attr('height'). Then to set the height of the div, use .css('height','999').

Upvotes: 2

Related Questions