我有 6 张图片的目录。我在 1 行中显示它们。在较大的屏幕上,所有 6 张照片都能正确显示,但当我将屏幕宽度更改为移动设备尺寸的平板电脑尺寸时,图片会减半。
我想要的行为是,在更大的屏幕上显示所有 6 张图片,但是一旦用户窗口大小,只有可以在该特定屏幕尺寸中完全显示的图片显示,其他的应该隐藏。现在,我正在使用 overflow: hidden 和固定大小的容器。
下面是一些显示问题的屏幕截图,
最佳答案
这个问题太笼统了,但我认为这将是一个示例。
将以下样式添加到 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
使得只显示单行
关于javascript - 在目录中显示完整图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58587578/