CSS 响应式标题图片

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