我有一个链接到 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>
最佳答案
我将 .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 将告诉它不要增长到超过所需的大小,并且不会创建蓝色空间。
关于html - Flexbox 根据内容自动确定容器的大小(宽度)(问题),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56358364/