Javascript 如何在包含背景的顶部放置具有宽度和高度的div？

我有一个汽车的背景图像，我想让它反应灵敏，所以背景会变大，在所有分辨率中都是最大的。我通过将背景大小设置为“包含”，成功地做到了这一点

但我还需要在这张图片中的特定区域顶部放置一个div，我想要一个div覆盖汽车挡风玻璃

问题是，我不知道如何计算挡风玻璃将被控制在哪里

有没有办法预测背景会在哪里？我怎样才能用div盖住挡风玻璃

如果这是不可能的，是否会有一些替代的包含，将保持图像尽可能大，就像包含处理它的方式

---

下面是我为模拟我的场景而制作的代码笔：

您需要将img和area div添加到同一个容器中。然后，使用百分比将它们正确放置在容器中。通过在容器中使用百分比，当调整容器大小时，元素的位置应保持不变，因为它们将响应容器而不是页面：

html，正文{ 宽度：100%； 身高：100%； } .汽车{ 宽度：50%； 显示：块； 保证金：0自动； 位置：相对位置； } .汽车img{ 宽度：100%； } .区域{ 宽度：70%； 身高：30%； 背景：RGBA200200200.5； 位置：绝对位置； 底部：0； 右：0； 最高：5%； 左：50%； 左边缘：-35%； } contain值的挑战在于它处理两种不同的场景。如果图像的纵横比比比容器宽，则图像的高度将为100%，并且宽度难以计算。在相反的情况下，宽度将为100%

因此，我们需要以不同的方式处理这两种不同的可能性

幸运的是，您使用的是100%的浏览器，因此我们可以对浏览器窗口的纵横比使用媒体查询

然后，使用相关视口单位计算矩形的位置

为了使媒体查询更改可见，我还修改了div的颜色

html，body，.bg{ 宽度：100%； 身高：100%； 保证金：0； } .bg{ 背景：url'https://thumbs.dreamstime.com/b/black-white-d-car-nissan-skyline-46715732.jpg"不重复,； 背景位置：中心； 背景尺寸：包含； } .区域{ 背景：RGBA200200200.5； 位置：绝对位置； 位置：绝对位置； 顶部：calc50%-43vh； 高度：26vh； 左：calc50%-54vh； 宽度：110vh； } /*肖像模式*/ @媒体屏幕和最大纵横比：8/5{ .区域{ 背景色：rgba200,0,0,0.5； 顶部：calc50%-28vw； 高度：17vw； 左：14vw； 宽度：71vw； } } 当前屏幕大小：