0

我一直试图解决这个问题并且一直忽略它，但现在我必须修复它。看，当窗口被调整大小时，无论是更大还是更小，我希望标题区域与标题图像成比例地改变大小，这样它在所有高于 1024 的分辨率上看起来都很干净。我在初始版本中有这个工作，但是如果我调整代码，我的内容将在标题区域的后面。即使现在你调整大小，然后全屏显示，内容在标题后面！啊! 真是头疼啊！

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

我正在使用它来更改尺寸，但它会导致图像转换尺寸，而不仅仅是“弹出”到它需要的尺寸。它似乎也使元素突然浮动，当您返回全屏时，内容将在它们下方。

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

        });
4

1 回答 1

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

演示

于 2013-04-28T02:31:50.340 回答