CSS响应标题图片

Question

我一直对自己是否以正确的方式感到好奇，我现在想解决这个问题。

这些天，在前端开发中，通常情况下，着陆页（常常是其他地方）都需要某种响应式标题图像，其中包含文本，可能是一个或两个按钮，无论如何。 重点是，标题变成了带有背景图像的容器。 很简单。

但是，在响应式开发时，您希望此背景图像缩放，因此您可以根据需要将background-size设置为100% ， cover等。 （让我们忽略对IE8的缺乏支持。Bootstrap宣布在即将发布的第4版中放弃对IE8的支持，这也是最终实现这一目标的我的提示）。 现在，我们有了一个不错的响应式背景图像，该图像可以扩展到页面的大小，同时保留宽高比。

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

好的，然后设置标题的高度，我们可以使用vw单位，因为标题的高度取决于其宽度，或更具体地说，取决于在任何给定时间的背景图像的宽度（假定标题的宽度为100％的窗口）。 假设我们的背景图像是1080x720 ，则它变成一个简单的方程式： height-percent = 720/1080*100 720/1080 height-percent = 720/1080*100 。 标头的高度现在将在任何给定时间正好是背景图像的高度。 到达此处的步骤似乎很复杂，但实际上，我们有一个非常简单的完全响应标头：

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

它在理论上可以正常工作，但是视口单元存在一些已知问题，更不用说我完全不关心IE8了。 但是为了争辩，让我们将其包含在使用这种解决高度问题的方法中。 我们想要一个不会让我们彻夜难眠的解决方案，因此我们继续进行解决方案2：

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

最后，我们可以打破Web设计的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