Question

我的图像宽度设置为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>

我怎样才能做到这一点？

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

Answer 2

这有助于您调整阴影图像的大小：

解决方案（未测试）

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

要获得图像的高度，请使用.attr（'height'）。然后设置div的高度，使用.css（'height'，'999'）。

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

2 个答案: