Question

我有一个指向jsFiddle的链接，它将提出问题。基本上，问题出在中间容器（sector2蓝色容器）中，该容器沿列方向弯曲并具有5个flex子元素。这些元素中有四个是尺寸为150x150px的图像。我已将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中。

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

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

Flexbox根据内容（问题）自动确定容器的大小（宽度）

1 个答案: