Html CSS响应头图像

我一直很好奇我这样做是否正确，现在我想解决这个问题

如今，在前端开发中，登录页（通常还有其他页面）通常需要某种具有响应性的标题图像，其中包含文本，可能是一个或两个按钮，等等。关键是，标题变成了一个带有背景图像的容器。很简单

但是，在响应式显影时，您希望此背景图像能够缩放，因此您可以根据需要将

背景大小设置为
100%
，
封面等。（让我们忽略IE8缺乏支持的问题。因此，这也是我最终向前迈进的线索）。现在我们有了一个响应良好的背景图像，它可以延伸到页面的大小，同时保留纵横比

这很好，但是标题的高度取决于背景图像的高度，而背景图像的高度取决于标题的宽度

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

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

它在理论上运作完美，但在这一点上，更不用说缺乏对IE8的完全支持，我可能不太关心。但是为了论证，让我们把它作为一个问题，用这个方法来解决高度问题。我们需要一个不会让我们夜不能寐的解决方案，因此我们继续讨论解决方案2：

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

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

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

最后，我想知道哪种解决方案最合适。请注意：我不是在征求你的意见，而是在寻找“做这件事的正确方法是什么。句号”。这对我来说是一个挑战，我真的需要一些答案：）
如果你试图支持古老的浏览器，那么JS是实现这一点的正确（也是唯一）方法

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

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

是的，JavaScript是我认为最好的解决方案，只是因为有那么多人很快就组织了一个暴徒来反对你。这真的很轻，谢谢你的回答我喜欢这个解决方案。我只想包括，使用JQuery实际上没有什么是“轻量级的”，因为您有包含整个JQuery头的功能，这相当多。我不觉得有什么问题，只是想提一下。