Question

我创建了一个展示区，其中我使用了flexbox来将图像对齐到右边。但是，当我缩小窗口大小时，图像会从窗口中移出。我正在寻找这样的事情：http://jsfiddle.net/xLc2Le0k/15/

以下是HTML的代码段：

<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的摘录：

.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％会使第一张图像等于我不想要的其他图像的大小。

Answer 1

您的代码中缺少的一件事是将100％宽度应用于您的img标记。给img 100％的宽度，它将以你想要的方式工作。

#places div img {
    width: 100%;
}

Answer 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>

并将图像的宽度设置为100％，如gagan所述：

.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%
            }
        }

    }
}

Answer 3

您应该将以下css属性添加到Flex容器中。当您缩小窗口时，它会自动将元素包装到下一行。

flex-wrap：wrap;

为什么我的图像溢出窗口的Flexbox？

3 个答案: