javascript - 在目录中显示完整图片

Question

我有 6 张图片的目录。我在 1 行中显示它们。在较大的屏幕上，所有 6 张照片都能正确显示，但当我将屏幕宽度更改为移动设备尺寸的平板电脑尺寸时，图片会减半。

我想要的行为是，在更大的屏幕上显示所有 6 张图片，但是一旦用户窗口大小，只有可以在该特定屏幕尺寸中完全显示的图片显示，其他的应该隐藏。现在，我正在使用 overflow: hidden 和固定大小的容器。

下面是一些显示问题的屏幕截图，

Answer 1

这个问题太笼统了，但我认为这将是一个示例。

将以下样式添加到 div 包装图像。

.wrapper {
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;

   // the following styles are optional but you must specify width and height
   width: 100%;
   height: 320px;
   padding: 20px;
}

并将这些样式添加到图像。

img {
   height: 100%;
   width: auto;

   // optional
   margin-right: 50px;
   margin-top: 50px;
}

wrapper 样式使图像在扩展 wrapper 宽度时换行成多行，overflow: hidden 使得只显示单行