Question

我正在制作游戏并拥有一系列＆＃34;房间＆＃34;使用background-size: cover缩放（并在必要时裁剪）以适合浏览器窗口的图像。

我想在这些图像上的关键位置顶部放置一些游戏内元素，但随着浏览器大小的变化，房间图像会改变位置/比例，这是非常棘手的。

我在这里有一个简单的演示：https://jsfiddle.net/p4p699cn/3/embedded/result/ - 理想情况下，我能够定位红色＆＃39; X＆＃39;在树的顶部，以便当浏览器（或在这种情况下，包含<div>元素）的大小调整时，内部＆＃39; X＆＃39;保持其相对于原始图像比例的位置，而不是浏览器窗口。

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

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

CSS：如何相对于具有background-size：cover的图像定位元素？

1 个答案: