圖像佔用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變形

回答

相關問題