如何保持恒定的图像高度？卡在弹性盒子里？

Posted 2023-03-05

【中文标题】如何保持恒定的图像高度？卡在弹性盒子里？

【英文标题】：How do I maintain constant image height? Stuck in flexbox?

【发布时间】：2021-10-06 11:16:27

【问题描述】：

我正在尝试创建具有不同图像高度和宽度的 flexbox。我希望断点为

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

我在搞什么鬼？为什么在缩小窗口时变得丑陋？即使在窗口大小达到 860px 断点之前，我也会丢失 3 列 的图像。我还可以做些什么？ 窗口大小达到 860px 后，它工作正常，但直到变得丑陋为止。

我希望我的图像高度不改变。就这样吧！

.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" >
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" >
</div>
  <div class="box">
  <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" >
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" >
</div>
  <div class="box">
  <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" >
</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:*" >
</div>
</div>
  

【参考方案1】：

在这种情况下，我会使用 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" >
  </div>
    <div class="box">
    <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" >
  </div>
    <div class="box">
    <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" >
  </div>
    <div class="box">
    <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" >
  </div>
    <div class="box">
    <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" >
  </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:*" >
  </div>
</div>

【讨论】：

嘿！我知道它可以通过网格轻松解决。您已经解决了使用网格的问题，除了网格应该应用于 container 类而不是 box 的事实。你应该更新你的代码。但是如何使用 flexbox 来解决我的问题呢？你有什么主意吗？请尝试！

【参考方案2】：

但是对于这种布局，使用网格是最好的方式，但我试图通过 flex 找到一种方式。对于“弹性方向：列；”高度很重要，因此您应该设置一个不能包含超过 2 张图像的高度。我用“height: 70vw;”做到了

.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" >
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/79/e2/8d/79e28db17abc2eb6c3085c9c72bff5e4.jpg" >
</div>
  <div class="box">
  <img src="https://www.pinkvilla.com/files/styles/gallery-section/public/zayn_malik_tattoos_1.jpg?itok=Q5bXGlfm" >
</div>
  <div class="box">
  <img src="https://i.pinimg.com/originals/b5/0c/30/b50c30ddaaffc98ff2cb077cc7f57823.jpg" >
</div>
  <div class="box">
  <img src="https://images.news18.com/ibnlive/uploads/2021/01/1610783227_zayn-malik.jpg" >
</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:*" >
</div>
</div>

【讨论】：

嘿伙计！我已经试过了。但如果我们这样做了，我们将在较小的图像周围有尴尬的空间。所以这就是我使用flex-direction 列的原因。使用 flex-direction: column ，它在 100% width of container 上看起来不错，并且在我到达 860px 断点后很好。但在我达到 860px 断点 之前，它变得丑陋，而且我失去了 3 列。我想你明白了我的意思，你可以解决这个问题。我们只能使用flex-direction: column。我知道，它可以通过 grid 轻松解决，如果我们无法实现，flex-direction: row 应该是我们的最终选择。试试看！

我用 flex 完成并更新了答案，但最好的方法是使用网格；

哇！伙计，只需一行代码height: 70vw 就可以实现我想要实现的一切。棒极了。但是between 830px to 859px 我们的画廊仍然在倒塌。是什么原因造成的？并摆脱它？我也不知道 vw 可以与 height 一起使用。我曾经认为 vw 表示宽度 和 vh 表示高度。 height: 70vw 是如何工作的？帮助我理解这一点！

正如我所说，这种布局的 flex 不是最佳实践，顺便说一下，我解决了高度折叠的问题：1120px; vw（相对于视口宽度的 1%）只是一个度量，因此您也可以将其用于高度。

感谢您的帮助！非常感谢！