时间戳

首页 > 解决方案 > Flexbox 根据内容（问题）自动确定容器的大小（宽度）

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

问题描述

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

当我想保持图像的纵横比并设置object-fit: scale-down. 此属性使图像保持纵横比，但容器 ( image-wrapper) 和蓝色容器 ( sector2) 仍保持 150 像素的原始图像宽度。

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

我将在此处另外添加 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>

标签： htmlcssflexbox

解决方案

我改变了.image-wrapper，flex: 0 0 auto;我相信它有你想要的效果。检查我是否在这个小提琴中 fork。

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

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

推荐阅读