html - Flexbox 根据内容自动确定容器的大小(宽度)(问题)

Question

我有一个链接到 jsFiddle这将提出问题。基本上，问题出在中间容器(sector2 蓝色容器)，它在列方向上 flex 并且有 5 个 flex 子元素。这些元素中的四个是大小为 150x150 像素的图像。我已经将 image-wrapper(每个子元素的类)赋予 flex: 1，这意味着蓝色容器应该被分成 5 个等高的部分。现在我设置了每张图片的 min-height: 100% ，这使得图片的高度与一个部分(子元素)的高度一样多。

当我想保持图像的纵横比并设置object-fit: scale-down 时，问题就出现了。此属性使图像保持宽高比，但容器 (image-wrapper) 和蓝色容器 (sector2) 仍保持原始图像宽度 150px。

我的问题是:如何保持图像的宽高比，同时容器应根据内容自动调整大小？

我将在此处另外添加 HTML 和 CSS 代码:

.container {
      display: flex;
      flex-direction: row;
      width: 600px;
      height: 500px;
      background-color: red;
    }
    
    .sector1 {
      display: flex;
      flex-direction: row;
      flex: 1 0 0%;
      background-color: green;
    }
    
    
    .sector3 {
      display: flex;
      flex-direction: row;
      flex: 1 0 0%;
      background-color: green;
    }
    
    .sector2 {
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      background-color: blue;
      margin: 0 6px;
    }
    
    .image-wrapper {
      display: flex;
      flex-direction: column;
      flex: 1 0 0%;
    min-height: 0;
        min-width: 0;
    }
    
    .image {
       object-fit: scale-down;
       min-height: 100%;
       width: auto;
    }

<div class="container">
    <div class="sector1"></div>
    
    <div class="sector2">
    
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
    
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
      <div class="image-wrapper"></div>
      
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
      <div class="image-wrapper">
        <img class="image" src="https://mk0powerpackele6qayu.kinstacdn.com/wp-content/uploads/2018/07/image-75-150x150.jpg" />
      </div>
      
    
    </div>
    
    <div class="sector3"></div>
    </div>




    

Answer 1

我将 .image-wrapper 更改为 flex: 0 0 auto; 我相信它具有您想要的效果。查看是否在这个fiddle that I forked .

您之前在 flex: 1 0 0%; 处有 .image-wrapper，这意味着元素从 0 宽度开始，然后增长到容器的大小。这种确定大小的方法没有考虑内部元素的大小。因此，增长到容器的宽度将在图像周围创建蓝色空间。

将其设置为 flex: 0 0 auto 将根据内部元素所需的大小确定宽度，因此为 auto。将 flex-grow 设置为 0 将告诉它不要增长到超过所需的大小，并且不会创建蓝色空间。