Html 居中放置的可缩放框

我正在寻找一个解决方案，定位几个不同大小的盒子（每个盒子中有一个图像），使它们可以一起伸缩。所有的框将集中在网页的中间。

   background-image:url('http://www.jaapsch.net/puzzles/images/cube2.jpg');
   background-size: 100%;

（一个直观的例子）

---

圆的目的是确保缩放和调整大小。如果站点中的四个框按比例缩小，圆圈将随之缩小。在四个框中将圆视为四个小图像。希望我能说清楚。

这不是怎么回事。试着做点什么，陷入困境，然后告诉我们你尝试了什么，你在哪里陷入困境。我已经尝试了很多东西。不能让它工作。调整大小的部分不是一个问题，尽管这是一个固定的定位，有一堆我想放在一起的内容，请参见示例：）