Question

如何让我的imgs不要溢出其容器<div class="display">之外并完美地制作一个正方形/盒子？

它应该适用于flexbox。

正如你所看到的，这个片段产生了3张图片，其中1张图片外面没有正确的盒子。

＆＃13;

.display {
  min-width: 500px;
  max-width: 500px;
}

.scenery {
  display: flex;
  flex-direction: column;
}

.scenery_1 {
  display: flex;
}

.scenery_2 {
  display: flex;
}

＆＃13;

<div class="display">
<div class="scenery">
  <div class="scenery_1">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
  </div>
  <div class="scenery_2">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
  </div>
</div>
</div>

＆＃13;

Answer 1

我不确定您使用display: flex的原因，但这有效：

.display {
  min-width: 500px;
  max-width: 100%;
  display: block; /* Add this, remove everything else*/
}

<div class="display">
  <div class="scenery">
    <div class="scenery_1">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    </div>
    <div class="scenery_2">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    </div>
  </div>
</div>

使用flexbox，整个容器中的图像溢出

1 个答案: