将图像缩放到窗口大小，同时保持相对位置(Scaling images to window size while keeping relative position to each other)

我想在我的网站上放置一个容器元素，它包含9个图像（像这样），可以根据窗口大小进行缩放并保持其纵横比（1：1，对图像抱歉），同时保持相同的相对位置。

到目前为止，我最好的尝试是让图像高度从容器元素中流出，并使窗口显示一个垂直滚动条，或者将一行的第三个图像推到下一行。

这是我目前所坚持的：

https://jsfiddle.net/5xdznc4e/

#img11 { position: relative; width: 30vmin; height: auto; } #img12 { position: relative; width: 30vmin; height: auto; } #img13 { position: relative; width: 30vmin; height: auto; }

在调整窗口大小时，它根本不会表现得很好。

I want to have a container element on my site that holds 9 images (like this) that scale responsively to window size and keep their aspect ratio (1:1, sorry for the image) while staying in the same relative position to each other.

So far my best attempts got me to where the image height would flow out of the container element and made the window show a vertical scroll bar or the third image of a row would get pushed down to the next row.

This is what I am currently stuck with:

https://jsfiddle.net/5xdznc4e/

#img11 { position: relative; width: 30vmin; height: auto; } #img12 { position: relative; width: 30vmin; height: auto; } #img13 { position: relative; width: 30vmin; height: auto; }

On resizing the window it doesn't behave nicely at all.