Question

我一直很好奇我是否以正确的方式做这件事，我现在想解决这个问题。

现在，在前端开发中，登陆页面（通常是其他页面）通常需要某种响应式标题图像，其中包含文本，可能是一两个按钮，无论如何。点是，标题成为具有背景图像的容器。很简单。

但是，在响应式开发时，您希望此背景图片可以缩放，因此您可以根据需要将background-size设置为100%，cover等。（让我们忽略对IE8缺乏支持。Bootstrap announced dropping support for IE8 in the upcoming version 4所以这也是我最终向前推进的暗示。现在我们有一个很好的响应式背景图像，可以拉伸到页面大小，同时保留纵横比。

这一切都很好，但我们的标题高度取决于背景图像的高度，这取决于标题的宽度。

好的，那么设置标题的高度，我们可以使用vw单位，因为标题的高度取决于其宽度，或者更具体地说，任何给定的背景图像的宽度时间（假设标题的宽度是窗口的100％）。假设我们的背景图像是 1080x720 ，它就变成了一个简单的等式：height-percent = 720/1080*100。现在，标题的高度恰好是任何给定时间背景图像的高度。到达这里的步骤可能看起来很复杂，但实际上我们有一个非常简单的完全响应的标题：

header {
    width: 100%;
    height: 66vw;
    background: url('bg.jpg') no-repeat;
    background-size: 100%;
}

理论上它完美无缺，但有a few known issues with viewport units，更不用说完全缺乏对IE8的支持，我现在不太关心。但是为了论证，让我们将这作为使用这种解决高度问题的方法的问题。我们想要一个不会让我们夜不能寐的解决方案，因此我们继续讨论解决方案＃2：

在标题容器中创建一个绝对定位的图像，使图像以width: 100%; height: auto响应，我们回到了我们开始的位置。响应式标题图像，但我们无法将标题容器设置为height: auto，因为图像具有绝对定位，并且我们的高度仍然取决于图像。更不用说，图像具有绝对定位，因此一旦视口变得比图像大，它就不会缩放任何更大，因为它的width: 100%属性适用于它自己（我认为？）。所以绝对位置方法存在两个问题，这使得它几乎无法使用。

最后，我们可以打破网页设计的10条诫命，并使用JavaScript动态设置宽度和高度。不理想，不漂亮，但它会起作用，并且将兼容所有浏览器，至少是我们仍在开发的浏览器。

但我们真的需要JavaScript吗？使用vw单位的第一种方法是否足够？这就是我难倒的地方。

所以为了解决这个问题，我想知道哪种解决方案最合适。请注意：我不是在征求您的意见，而是在寻找“是正确的方法来执行此操作。期间”。这个对我来说是一个挑战，我真的可以使用一些答案：）

Answer 1

如果您尝试支持古老的浏览器，那么JS是实现此目的的正确（且唯一）方式。

我个人喜欢使用jQuery。您可以将像素转换为vh / vw，如下所示：

$(window).height() * 0.98 // is equiv to 98vh
$(window).width() * 0.98 // is equiv to 98vw

CSS响应头图像

1 个答案: