Question

我一直试图解决这个问题并且忽略了它，但现在我必须解决这个问题。请注意，当窗口调整大小时，无论是更大还是更小，我都希望标题区域按比例更改标题图像的大小，以便在1024以上的所有分辨率上看起来都很干净。我在初始版本中使用它，但是如果我调整代码，我的内容将在标题区域后面。即使现在当你调整大小，然后完全放大，内容也在标题后面！啊!真是太头疼了！

http://jordan.rave5.com/tmpstuff/index.html（这是我正在研究的那个） http://jordan.rave5.com/tmpstuff/index2.html（这个正确调整大小......）

我正在使用它来改变大小，但它会导致图像转换大小，而不仅仅是'pop'到它需要的大小。它似乎也会使元素突然浮动，当你回到全屏时，内容会在它们之下。

        // Control Shadow Size
        $(window).load(function() {

            var imageGrad = $('.image-grad'),
                image = $('#header-image-border img'),
                border = $('#header-image-border'),
                grad = $('#header-image-grad');

            function resizeDiv () {
                imageGrad.height(image.height());
                imageGrad.width($(window).width());
                grad.height(image.height());
                grad.width($(window).width());
                border.height(image.height());
                border.width($(window).width());
            }

            resizeDiv();

            $(window).resize(function() { resizeDiv(); });

        });

Answer 1

您无需任何JavaScript即可获得此效果。

简化示例：

HTML：

<header>
     <h1>Cats</h1>
</header>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum magnam eaque harum ullam earum accusantium praesentium quia a expedita voluptas inventore porro odit libero aliquid sunt culpa voluptatem! Nesciunt commodi?</p>
    ...
</body>

CSS：

header {
    background: url("//placekitten.com/800/500") black;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding: 15% 0;
}

Demo

标题容器扩展/收缩图像

1 个答案: