Html 调整图像大小以强制网格布局上没有容器边距是否需要媒体查询或计算？

是否可以更改此代码笔：

图像在没有媒体查询或使用计算的情况下调整大小，并且对于任何屏幕大小都不留容器边距

现在，取决于你的屏幕大小，你可能有也可能没有合适的边距

要求1：图像需要保持最大200px和最小100px

要求2：图像数量未知，但均为正方形

要实现这一点，是否需要以下媒体查询/计算示例

示例1（对中断点和列计数进行多重媒体查询硬编码）：

例2（你认为这行不通吗）

例3

获取javascript中的实际屏幕大小，然后调整图像的最大宽度 基于预先计算/正式评估

---

是否有更好的方法来处理此任务？

设置

最大宽度：200px和<编码>最小宽度：100px并将
宽度
设置为任何适当的值，单位为
vw
，即veiwport宽度。如果要将n图片排成一行，请将宽度设置为等于100/n vw的值

     @media (max-width: 1200px) {
      #squares {
       -moz-column-count:    4;
       -webkit-column-count: 4;
       column-count:         4;
       }
      }

        minmax(100px, 200px)