将div的子元素放置在完全相同的位置

Question

我有一张包含一些建筑物的城镇图像，我将其放置为 div 的背景。

现在我想在该 div 内添加背景中每个建筑物的较小图像，以便它们与背景图像上的位置完全相同。

较小的图像比背景上的原始建筑物稍亮，因此我稍后将获得突出显示建筑物的悬停效果。

问题是我的建筑物在不同的设备上飞行。无论我用百分比%还是vh、px设置左/上。他们总是改变相对于具有城镇视图背景的主 div 的位置。

我需要的是无论如何，里面的背景和较小的图像都保持不变。

我只使用简单的 css 和一些顺风 css 样式，但无论我做什么，它都不起作用。如果图片不能滚动，这样所有设备上的人都能看到完整图片，那就太好了。

最好的方法是什么？

<div style="width: 100%; height: 100%; background-image: url('/images/Town_5.png'); background-size: contain; background-repeat: no-repeat;">
    <img src="/images/House_4.png" class="relative" style="left:7%; top:5%; width:17%">
    <img src="/images/Mine_1.png" class="relative" style="left:40%; top:0%; width:21%">
</div>

Answer 1

主要问题是您需要将每个建筑物的宽度定义为容器宽度的百分比。例如

mine

的宽度是整个宽度的20%，所以我们使用

20vw

。然后将它们定位即可。

*{
  margin: 0;
  padding: 0;
}
.background {
  width: 100vw; 
  aspect-ratio: 1024 / 768;
  position:relative;
  border: 1px solid red;
}
.mine {
  border: 1px solid red;
  position: absolute;
  width: 20vw;
  aspect-ratio: 1;
  top: 0%;
  left: 40%;
}
.house {
  border: 1px solid red;
  position: absolute;
  width: 18vw;
  aspect-ratio: 1;
  top: 6%;
  left: 7%;
}
.mine:hover, .house:hover {
  filter: drop-shadow(5px 5px 5px #4444dd);
}

<div class="background">
    <div class="mine"></div>
    <div class="house"></div>
</div>