Question

图像占用了flexbox div中的所有空间（100％）而不会使div变形。因此div不会调整为包含图像，但图像会调整以填充div。

我知道在包含图片的flexbox内部div中，如果你说：

，它将调整为图像的大小

img {height : 100%; width : 100%;}

我需要flex div中的图像来占用div的所有空间。因此100％高度和100％宽度不会影响div本身。所以无论div的大小如何，我都需要一个图像来拉伸并占据所有可用空间而不改变div本身。我该怎么做？

注意：如果使用flexbox是不可能的 - 那么如何使用不同的技术来实现结果呢？

这是html：

<div class='box-wrap'>
   <div class='box'>
      <div>
         <img src="http://placehold.it/400x400"/>
      </div>
   </div>
</div>

这是css：

.row {
   margin-top      : 10px;
   display         : flex;
   flex-direction  : row;
   flex-wrap       : wrap;
   border          : 1px solid silver;
}
.box,.box-wrap {
   background      : white;
   flex            : 1 1 8%;
   border          : 1px solid #aaa;
   margin          : 10px;
   justify-content : space-between;
   letter-spacing  : 1px;
   box-sizing      : border-box;
} 
.box-wrap {
   padding         : 0.5em 10px;
   background      : white;
}

以下是相应的codepen：http://codepen.io/anon/pen/WwYeJX

Answer 1

尝试使用object-fit属性作为img：

.box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
}

Answer 2

首先，要使img填充其容器的整个高度，您可以将其容器设置为flex（这会使图像停止保持其纵横比固定）。然后将容器的宽度和高度设置为您想要的值：

.box div {
display:flex;
height:600px;
width:100%;
}

要填写它的全宽，请执行以下操作：

.box div img {
width:100%;
}

在这种特殊情况下，它根据窗口调整宽度并具有固定高度：https://jsfiddle.net/（此处为演示）

评论：除非您需要所有嵌套div的非常具体的原因，否则您可以轻松删除最内层（第3级）div并将这些值应用于第2级div。

图像占用了flexbox div中的所有空间（100％）而不会使div变形

2 个答案: