随浏览器窗口大小变化的英雄图像高度

Question

我正在尝试实现一种效果，该效果可以在https://lexus.com.au网站上

看到

• 无论浏览器屏幕的高度（台式机或笔记本电脑等）如何，英雄图像和cta栏始终会填充浏览器屏幕。
• 英雄图像的高度随浏览器高度的变化而变化。
• 当屏幕变化时，图像也以主要内容为中心。
• 屏幕底部的CTA栏始终保持相同的高度和位置。

这是使用window.InnerHeight或其他方法使用JS完成的吗？

Answer 1

TL：DR： 这是使用window.InnerHeight或其他方法使用JS完成的吗？ 否

有两个原因可以帮助实现这一目标，虽然可能还有更多原因，但是我可以看到这些原因，而无需重建所做的只是为您提供答案的方法。

1. 他们使用 background-position: % %定位图像。

   第一个值是水平位置，第二个值是垂直位置。左上角为0％0％。右下角是100％100％。如果仅指定一个值，则另一个值将为50％。默认值为：0％0％

   https://www.w3schools.com/cssref/pr_background-position.asp 这就是使图像看起来像挤在顶部横幅下的原因。

2. 然后完成这些操作，以将元素本身定位在上述div中。 background-size: cover; display: table; https://mattboldt.com/kicking-ass-with-display-table/

重要的是要理解，在整个过程中，占用整个宽度的原因很简单；宽度设置为100％。这实际上是整个工作中最简单的部分。但是，将以上元素组合以获得正确的效果将需要在Codepen上进行一些操作。话虽如此，我给你的是成功所需要知道的。

下面的链接是很好的链接，可让您开始全面了解如何完成此任务。