在目录中显示完整图片答案

【问题标题】：Show Complete Pictures in Catalog在目录中显示完整图片
【发布时间】：2020-02-23 12:30:56
【问题描述】：

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

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

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

【问题讨论】：

给 Html 编码看看你是如何实现的，在你的 Sass 或 css 中使用媒体屏幕查询
虽然，这不是一个不常见的问题和担忧，我相信它可以得到回答，@Fussionweb 是正确的，你应该提供一个代码示例来展示你所做的并重现了这个问题。

标签： javascript html css reactjs sass

【解决方案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;
}

包装器样式使图像在扩展包装器宽度时以多行包装，而overflow: hidden 使仅显示单行

【讨论】：

【解决方案2】：

在 html 中的 img 标签上使用 width:100%

或

你可以在你的样式表中使用它

img{
  width:100%;
}

如果你img有一些固定的height width，也可以尝试使用objectfit:contain

【讨论】：

可能只是想包裹在容器上，而不是修改图像大小和缩放。
然后相应地定位到 .container img{ width: 100%;}
还有你为什么要使用溢出隐藏？

【解决方案3】：

这里是 amir mahdi digbari 扩展解决方案的实际应用。

您可以使用 css 网格实现相同的效果，但 flexbox 已经足够了。

.img {
  height: 200px;
  width: 200px;
  border: 1px solid red;
}

.wrapper {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 200px;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 2px solid blue;
}

.container {
  width: 1250px;
  max-width: 100%;
  margin: auto;
}

<div class="container">
  <div class="wrapper">
    <div class="img">Img1</div>
    <div class="img">Img2</div>
    <div class="img">Img3</div>
    <div class="img">Img4</div>
    <div class="img">Img5</div>
    <div class="img">Img6</div>
  </div>
</div>

编码愉快！

【讨论】：