7

我有一个宽度设置为 100% 且最小宽度为 1024 像素的图像。我想将我的“阴影”div 保留在图像上，并随着窗口大小的变化匹配它的高度，这会导致图像大小与窗口宽度成比例地变化。我当前的代码似乎什么也没做......

模板在这里http://jordan.rave5.com/tmp/您会注意到背景覆盖和背景渐变 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>

我怎样才能做到这一点？

4

2 回答 2

4

您需要使用设置 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(); });
于 2013-04-25T08:03:53.240 回答
2

这将帮助您调整阴影图像的大小：

解决方案（未测试）

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

要获取图像的高度，请使用 .attr('height')。然后设置 div 的高度，使用 .css('height','999')。

于 2013-04-25T08:01:51.907 回答