容器中的多个图像按比例调整大小，而无需预先计算图像比率

Question

我在一个容器中有不同尺寸的图像。有一个主图像，它响应页面的宽度，然后将不同尺寸的较小图像完全重叠并定位。

如果容器调整了所有小图像的大小，并正确调整了相对于大图像的位置，则我必须手动将每个小图像的百分比宽度设置为主图像宽度的百分比比例，这是代码：

.image-container {
  margin: 10%;
  position: relative;
}

.big-image {
  max-width: 100%;
}

.little-image {
  position: absolute;
  border: 1px solid red;
  display: block;
  max-width: 100%;
  height: auto;
}

.img1 {
  max-width: 10%;
  top: 10%;
  left: 10%;
}

.img2 {
  max-width: 20%;
  top: 50%;
  left: 66%;
}

.img3 {
  max-width: 25%;
  top: 80%;
  left: 20%;
}

<div class="image-container">
  <img class="big-image" src="http://placehold.it/2000x1000" alt="bg" />
  <img class="little-image img1" src="http://placehold.it/200x80" />
  <img class="little-image img2" src="http://placehold.it/400x192" />
  <img class="little-image img3" src="http://placehold.it/500x100" />
</div>

有没有一种方法可以不必计算每个小图像的百分比率？

理想的情况是希望在CSS中执行此操作，但可以使用JS。