javascript - jQuery将div高度与动态图像高度匹配

我有一个图像，其宽度设置为100％，最小宽度为1024px。我想将“阴影” div保留在图像上，并且还要随着窗口大小的变化匹配其高度，这会导致图像大小与窗口宽度成比例地变化。我当前的代码似乎无能为力...

模板在这里http://jordan.rave5.com/tmp/，您会注意到backgroudn-overlay和background-gradient div不会扩展文档的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>

我该怎么做？

最佳答案

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

您可以执行以下操作:

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