将容器中的元素定位到任意指定百分比且不会溢出容器的最简单方法是什么？

Question

有没有一种方法可以像定位背景图片那样以类似的方式在容器中定位元素？

CSS image-position 效果绝对惊人：

.container {
  width: 100%;
  height: 250px;
  border: 1px solid black;
  
  background-image:
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100'),
    url('http://placekitten.com/100/100');
  background-repeat: no-repeat;
  background-position: 0% 0%, 25% 25%, 50% 50%, 75% 75%, 100% 100%;
}

<div class="container"></div>

无论您设置什么百分比，这将是您的背景图片的位置，不会溢出容器。

然而，当您使用 left, right, top, bottom 属性定位元素时，这种类型的定位方式并不相同。试图获得与上述相同的结果可能会非常麻烦：

    .container {
      width: 100%;
      height: 250px;
      border: 1px solid black;
      position: relative;
    }
    .container img {
      position: absolute;
     }

<div class="container">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 0%; top: 0%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 25%; top: 25%; transform: translate(-25%, -25%);">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 50%; top:50%; transform: translate(-50%, -50%);">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 75%; top: 75%; transform: translate(-75%, -75%);">
  <img src="http://placekitten.com/100/100" alt="kitten" style="left: 100%; top: 100%; transform: translate(-100%, -100%);">
</div>

所以我的问题是 - 将容器中的元素定位到任何指定百分比的最简单方法是什么？还有比我展示的更好的方法吗？

Answer 1

使用CSS个变量：

.container {
  width: 100%;
  height: 250px;
  border: 1px solid black;
  position: relative;
}

.container img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(calc(-1*var(--x)), calc(-1*var(--y)));
}

<div class="container">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 0%; --y: 0%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 25%; --y: 25%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 50%; --y:50%;">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 75%; --y: 75%">
  <img src="http://placekitten.com/100/100" alt="kitten" style="--x: 100%; --y: 100%;">
</div>

将容器中的元素定位到任意指定百分比且不会溢出容器的最简单方法是什么？

What is the easiest way to position elements within a container to any secified percentage, without a container overflow?

html

css

css-position