如何让至多四张图片均匀的分布在显示页面的四周

HTML代码：

    <div class="container">
        <div class="image-container">
            <img src="./image1 alt="Image 1">
        </div>
        <div class="image-container">
            <img src="./image2" alt="Image 2">
        </div>
        <!-- 添加更多图片容器，最多四张图片 -->
    </div>

CSS代码：

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh; /* 或者根据需要设置高度 */
            padding: 20px;
            box-sizing: border-box;
        }

        .image-container {
            width: 25%; /* 根据图片数量调整百分比 */
            text-align: center;
        }

        img {
            max-width: 100%;
            height: auto;
        }