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

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

我知道，如果你说的那么Flexbox包含图像内的div将调整到德图像尺寸：

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

我需要柔性格的图像采取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

来源

2016-04-25 Donalda Donalda

你的问题对我来说并不完全清楚。但也许你可以使用CSS'object-fit'属性：http://stackoverflow.com/a/34301817/3597276 –

它不工作..我只是想要也许打破img的原始sie，但莳萝所有div不要触摸它的大小 –

你能提供一个现场演示吗？ –

尝试使用object-fit属性为IMG：

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

来源

2016-04-30 12:20:12

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

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

并填写其全宽做到这一点：

.box div img { 
width:100%; 
}

在这种特殊情况下，它会调整按照宽度到窗口，并有一个固定的高度：https://jsfiddle.net/（demo在这里）

评论：除非有一个非常具体的原因，到二级分区。

来源

2016-12-01 15:35:00

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

回答

相关问题