CSS:如何相对于具有背景大小的图像定位元素:封面？

Question

我正在制作游戏并有一系列“房间”图像，这些图像使用 background-size: cover 进行缩放(并在必要时进行裁剪)以适应浏览器窗口。 .

我想将一些游戏内元素放置在这些图像的关键位置之上，但事实证明这很棘手，因为房间图像会随着浏览器大小的变化而改变位置/比例。

我这里有一个简单的演示:https://jsfiddle.net/p4p699cn/3/embedded/result/ – 理想情况下，我可以将红色的“X”放在树的顶部，这样当浏览器(或在本例中，包含 <div> 元素)调整大小时，内部的“X”保持其相对位置到原始图像的比例而不是浏览器窗口。

有没有人对如何实现这一目标有任何想法？

Answer 1

通过使用简单的 <img/> 几乎可以实现所需的功能标签而不是 CSS background .但是，它与 background-size: cover 不同。并且需要对图像的最小/最大尺寸做出一些假设。以下是您的代码，稍作修改。另请注意display: inline-block在 inner 上框，这很重要。

body, html {
  height: 100%;
}

.container {
  width: 200px;
  height: 200px;
  border: 3px solid #cccccc;
  resize: both;
  overflow: hidden;
}

.inner {
  width: auto;
  height: 100%;
  display: inline-block;
  position: relative;
}

.img {
  height: 100%;
  width: auto;
}

.marker {
  font-size: 48px;
  color: red;
  position: absolute;
  top: 63%;
  left: 7%;
  padding-left: 20%;
  transform: translate(0, -100%);
}

<div class="container">
  <div class="inner">
    <div class="marker">X</div>
    <img src="http://feelgrafix.com/data/landscape/landscape-3.jpg" height="2848" width="4288" class="img" />
  </div>
</div>

drag this box to resize it