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

Question

我有一张图片，其宽度设置为 100%，最小宽度为 1024 像素。我想将我的“阴影”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>

我怎样才能做到这一点？

Answer 1

你需要使用.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(); });