jQuery匹配div高度与动态图像高度

Question

我的图像宽度设置为100%,最小宽度为1024px.我希望在图像上保留"阴影"div,并在窗口大小改变时匹配它的高度,这会导致图像大小按比例变为窗口宽度.我目前的代码似乎什么都不做......

模板在这里http://jordan.rave5.com/tmp/你会注意到backgroudn-overlay和background-gradient divs不会扩展100%的文档.那是另一个问题.大声笑.我试图让它们成为BG 100%的宽度和高度.

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>

我怎么能做到这一点？

Answer 1

你需要使用设置div的高度.height

你可以执行如下操作：

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(); });