带有 2 张图像的响应式绝对定位

Question

我有一个包含 11 个区域（左端区、右端区和 0-9 区）的足球场图像。我还有一个足球图像，我希望能够绝对放置在其中任何一个区域中需要 11 个区域，并让球和场地的大小响应调整（它将在平板电脑、台式机和移动设备上使用）。我也在使用引导程序，但现在我已经去掉了这个变量，所以我可以尝试得到它适用于我自己的 CSS/HTML。

我可以让它将球绝对定位在球场的顶部，我可以让球场的大小适当缩小，但球的大小保持不变。此外，随着屏幕尺寸的缩小，球的位置会变得异常。我怀疑这是因为我将 px 单位用于左/上值。我尝试让它与百分比一起工作（左：10%、上：50% 等），但当我这样做时它似乎忽略了左/上。

我也尝试设置字段容器的宽度和高度，它尊重百分比，但随后它不再响应。我是一名学习 CSS 的后端开发人员，我确信我只是错过了定位和响应能力的一些关键但简单的方面。我宁愿不求助于一些 hacky 解决方案，我将图像分成几个部分，这会带来很多问题。

媒体查询能更好地处理这个问题吗？

HTML

<div class='field-container'>
  <img src='https://i.imgur.com/R4nJuCS.png' class='field' />
  <img src='https://i.imgur.com/OFUsjLJ.png' class='ball' />
</div>

CSS

.field-container {
  position:relative;
  width:1000px;
  height:200px;
  /* add this to test responsiveness */
  /* width:400px; */
}
.field {
  position:absolute;
  max-width: 100%;
  height: auto;
}
.ball {
  position:absolute;
  top:50%;
}

这是我的代码笔： https://codepen.io/tjans79/pen/ZEWqjQb

Answer 1

我想你想要这样的东西：

.field-container {
  position:relative;
  width:50%;
}
.field {
  width: 100%;
  height: auto;
}
.ball {
  left: calc(8.3% * 4);
  display: inline-block;
  position:absolute;
  top: 50%;
  width: 7%;
  transform: translate(10%, -50%);
}

该字段不必绝对定位，但它必须填充它的包含元素。

球的宽度应该是其容器的一个百分比，以使其按比例调整大小。 您可以将球相对于容器绝对定位，距顶部 50%，然后使用transform 将其平移回其高度的一半 (50%)； 最后，可以使用 calc 来定位球在球场上的位置。 8.3% 是 100/12，这是该场的 12 个部分之一。调整第二个数字以在部分之间移动球。 translate 函数需要 10% 才能将球轻推到位。