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

Question

是否可以更改此代码笔: https://codepen.io/trynn/pen/gObxmZJ

图像在没有媒体查询或使用计算的情况下调整大小并且没有为任何屏幕尺寸留下容器边距？

现在，根据您的屏幕尺寸，您可能有也可能没有右边距。

要求 1:图片需要保持最大 200 像素和最小 100 像素。

要求2:未知数量的图像，但都是正方形。

是否需要以下媒体查询/计算示例来完成此操作？

示例 1(使用多个媒体查询对断点和列数进行硬编码):

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

示例 2(认为这行不通)？

        minmax(100px, 200px)

示例 3

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

有没有更好的方法来处理这个任务？

Answer 1

设置max-width: 200px;和min-width: 100px;并将width设置为任意合适的值，单位vw，即视口(viewport)宽度。如果您想要连续 n 张图片，则将宽度设置为等于 100/n vw 的值。