响应式绝对定位，包含2张图像

问题描述

我有一个足球场的图像，它有11个区域（左端区域，右端区域和0-9区域。我也有一个足球图像，我希望能够绝对地放置在这些区域中所需的11个区域，并且具有相应的球和场大小（将在平板电脑，台式机和移动设备上使用）。我也在使用引导程序，但现在我已经删除了该变量，因此我可以尝试获取它可以与我自己的CSS / HTML一起使用。

我可以将球绝对定位在场地顶部，并且可以适当减小场地的大小，但是球保持不变。此外，随着屏幕尺寸的缩小，球的位置变得不整齐。我怀疑这是由于我将px单位用于左/上值。我已经尝试过以百分比（左：10％，上：50％，等等）工作，但是当我这样做时，它似乎忽略了左/上。

我也尝试设置场容器的宽度和高度，它尊重百分比，但是随后它不再响应。我是学习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

解决方法

我认为您想要这样的东西：

.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个部分之一。调整第二个数字以在两个部分之间移动球。转换功能仅需10％即可将球推入到位。

css-position responsive-design responsive-images