具有 2 个图像的响应式绝对定位

Question

我有一张包含 11 个区域（左端区、右端区和 0-9 区）的足球场图像。我还有一张足球图像，我希望能够将其绝对放置在任何区域这些所需的 11 个区域，并根据需要调整球和场地的大小（它将在平板电脑、台式机和移动设备上使用）。我也在使用 bootstrap，但现在我已经删除了该变量所以我可以尝试让它与我自己的 CSS/HTML.

一起工作

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

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

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

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 个分区之一 field.Adjust 第二个在分区之间移动球的数字。翻译功能只需要 10% 就可以将球推到位。

具有 2 个图像的响应式绝对定位

Responsive absolute positioning with 2 images

css

css-position

responsive-design

responsive-images