如何保持图像高度不变？卡在柔性箱里？

Question

我正在尝试创造不同的图像高度和宽度的柔性盒。我想要断点

 max-width: 640px; ------->Only one column
 max-width: 860px; -------->Two columns only
 greater than: 860px;-------->Three column only

我在搞什么？为什么在缩小窗口的同时变得丑陋呢?我甚至在窗口大小达到860 am 断点之前就丢失了图像的3列。我还能做什么？当窗口大小达到860 to 时，它就可以正常工作了，但是直到它变得丑陋为止。

，我希望我的图像高度不被改变。顺其自然吧！

​

.container {
  width: 100%;
  height: 1000px;
  display: flex;
  flex-direction: column;
  background: green;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  
  
}
.box {
  width: 30%;
  border: 2px solid red;
  margin: 8px;
}
img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 860px) {
  .container {
    background-color: red;
    height: 1100px;
  }
  .box {
    width: 46%;
  }
}
@media screen and (max-width: 640px){
    .container {
        background-color: yellowgreen;
        height: auto;
        flex-direction: row;
    }
    .box {
        width: 100%;
    }
}

<div class="container">
  
<div class="box">
  <img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
</div>
  <div class="box">
  <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
</div>
  <div class="box">
  <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
</div>
  <div class="box">
  <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
</div>
</div>

​

Answer 1

在这个cas中，我将使用CSS column-count和CSS grid。

仅举一个代码的例子：

​

.container {
  column-count: 3;
  column-gap: 10px;
  background: green;
  padding: 10px;
}

@media (max-width: 640px) { 
  .container {
    column-count: 1;
  }
}

@media (min-width: 641px) and (max-width: 840px) { 
  .container {
    column-count: 2;
  }
}

img {
  max-width: 100%;
  display: block;
}

.box {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
  border: 2px solid red;
}

<div class="container">  
  <div class="box">
    <img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
  </div>
    <div class="box">
    <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
  </div>
    <div class="box">
    <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
  </div>
</div>

​

Answer 2

然而，对于这个布局来说，使用网格是最好的方法，但是我尝试通过flex找到一种方法。对于“弯曲方向:列；”高度是很重要的，所以你应该设置一个不能包含超过2个图像的高度。我用“身高:70 it；”

​

.container {
  width: 100%;
  height: 70vw;
  display: flex;
  flex-direction: column;
  background: green;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  
  
}
.box {
  width: 30%;
  border: 2px solid red;
  margin: 8px;
}
img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 860px) {
  .container {
    background-color: red;
    height: 1120px;
  }
  .box {
    width: 46%;
  }
}
@media screen and (max-width: 640px){
    .container {
        background-color: yellowgreen;
        height: auto;
        flex-direction: row;
    }
    .box {
        width: 100%;
    }
}

<div class="container">
  
<div class="box">
  <img src="https://www.daily-sun.com/assets/news_images/2017/01/12/DAILYSUN_ZYAN.jpg" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" alt="">
</div>
  <div class="box">
  <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" alt="">
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" alt="">
</div>
  <div class="box">
  <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" alt="">
</div>
  <div class="box">
  <img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/gigi-hadid-and-zayn-malik-attend-the-manus-x-machina-news-photo-527409630-1554477973.jpg?crop=1.00xw:0.762xh;0,0.0194xh&resize=480:*" alt="">
</div>
</div>

​