为什么我的图像会溢出带有 flexbox 的窗口？答案

【问题标题】：Why are my images overflowing the window with flexbox?为什么我的图像会溢出带有 flexbox 的窗口？
【发布时间】：2018-08-03 15:40:00
【问题描述】：

我创建了一个展示部分，其中我使用了 flexbox 将图像与右侧对齐。但是，当我缩小窗口的大小时，图像会离开窗口。我正在寻找这样的东西：http://jsfiddle.net/xLc2Le0k/15/

这是 HTML 的 sn-p：

<div class="showcase shadow">
      <div id="places">
        <p class="category">Places</p>
        <div>
          <img src="img\Taj Hotel.png" alt="">
        </div>
        <div>
          <img src="img\Gateway of India.png" alt="">
        </div>
        <div>
          <img src="img\Shack at Goa.png" alt="">
        </div>
      </div>

      <p class="more-text">View more...</p>
    </div>

这是 SCSS 的 sn-p：

.showcase {
      width: 100%;
      margin-top: 5%;
      display: inline-block;

        #places {
          width: 100%;
          display: flex;

            div:nth-of-type(1) {
              align-self: flex-end;
            }

            div {
              margin-left: 0.5%;
            }

        }
    }

这是实时网页的链接：https://swizzx.github.io/Photography-Portfolio/

请注意，我尝试将父元素和元素的宽度设置为 100%，当我这样做时，它会缩小，但不能像我希望它在上面提供的 JSFiddle 中那样工作。相反，将宽度设置为 100% 会使第一张图片与我不想要的其他图片的大小相等。

【问题讨论】：

am looking for something like this --> 所以使用它，不是吗？你有代码和你想要的
我已经提到它在我的情况下不起作用，因此我发布了我的代码，看看我错过了什么或做错了什么
您好 Swizzx，通常如果您的问题不在于 Sass 本身，或者如何在 Sass 中编写东西，最好提供编译后的 CSS。
其实我的问题是我应该如何使用 flexbox 使图像流畅并防止它溢出窗口。

标签： html css sass flexbox

【解决方案1】：

您的代码中缺少的一件事是将 100% 宽度应用于您的 img 标签。给 img 100% 的宽度，它会按照你想要的方式工作。

#places div img {
    width: 100%;
}

【讨论】：

试过了，如果我这样做，它不会保持其纵横比，而窗口大小会不断缩小，然后消失
我在 jsfiddle 中尝试过，并且保留了纵横比。 jsfiddle.net/05jw3eyx/1
感谢您的宝贵反馈！

【解决方案2】：

实际上，是#places div 中的段落导致图像缩小得比要求的要大得多。发现必须将其放在#places div 之外和 .showcase div 中，例如：

<div class="showcase shadow">
      <p class="category">Places</p> // like this
      <div id="places">
        <div>
          <img src="img\Taj Hotel.png" alt="">
        </div>
        <div>
          <img src="img\Gateway of India.png" alt="">
        </div>
        <div>
          <img src="img\Shack at Goa.png" alt="">
        </div>
      </div>

      <p class="more-text">View more...</p>
    </div>

并且像 gagan 提到的那样将图像的宽度设置为 100%：

.showcase {
  width: 100%;
  margin-top: 5%;
  display: inline-block;

    #places {
      width: 100%;
      display: flex;
      justify-content: flex-end;

        div:nth-of-type(1) {
          align-self: flex-end;
        }

        div {
          margin-left: 0.5%;

            img {
              width: 100%; //width to 100%
            }
        }

    }
}

【讨论】：

【解决方案3】：

您应该将下面的 css 属性添加到 flex 容器中。当您缩小窗口时，它会自动将元素换行到下一行。

flex-wrap: 换行；

【讨论】：