一段时间以来，我一直在尝试解决这个问题，但一直忽略它，但现在我必须解决它。看，当窗口调整大小时，无论是变大还是变小，我都希望标题区域与标题图像成比例地改变大小，以便它在 1024 以上的所有分辨率下看起来都很干净。我在初始版本中有这个工作，但如果我调整代码，我的内容将在页眉区域后面。即使现在当你调整大小，然后全屏显示时，内容都在标题后面!啊!真让人头疼!
http://jordan.rave5.com/tmpstuff/index.html (这是我正在做的) http://jordan.rave5.com/tmpstuff/index2.html (这个可以正确调整大小...)
我正在使用它来更改尺寸，但它会导致图像过渡尺寸，而不仅仅是“弹出”到它需要的尺寸。它还似乎使元素突然 float ，当您返回全屏时内容将在它们下面。
// 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(); });
});
最佳答案
您不需要任何 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;
}
关于jquery - 标题容器扩展/收缩图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16258862/