css - 图像占用 flexbox div 中的所有空间 (100%) 而不会使 div 变形

Question

图像占据了 flexbox div 中的所有空间 (100%) 而没有使 div 变形。所以不是 div 调整以包含图像，而是图像调整以填充 div。

我知道在包含图像的 flexbox 内部 div 中，如果您说:

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

我需要一个 flex div 中的图像来占用 div 的所有空间。所以 100% 高度和 100% 宽度不会影响 div 本身。因此，无论 div 的大小是多少，我都需要在其中放置一个图像来拉伸(stretch)并占据所有可用空间，而无需更改 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;
}

这是相应的代码笔:http://codepen.io/anon/pen/WwYeJX

Answer 1

尝试对 img 使用 object-fit 属性:

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