CSS Flexbox圖像收縮

Question

我在網站上工作，並有CSSflexbox問題。基本上，我有一個固定的高度和寬度的div。在div的內部，我需要有一個標題區域，內容區域和頁腳區域（從頂部到底部的順序）。標題和頁腳區域必須總是足夠高以呈現其內容（通常是一行文本）。內容區域必須縮小，以使這三個區域垂直（和水平）適合其父代div。

問題是內容區域包含一個圖片，當內容區域縮小到垂直放置時，該圖片必須保持寬高比。

我的基本方法（不起作用）：在父div上使用CSS flex。使標題區域和頁腳區域具有flex-shrink爲0（因此它們適合其內容）。然後，使內容區域的flex-shrink和它內部的圖像爲1（理論上使所有三個區域都適合，但這不起作用，JSFiddle就證明了這一點）。

HTML：

<div class="container"> 
    <div class="title-container"> <!-- should not shrink --> 
     <h1>Title</h1> 
    </div> 
    <div class="picture-container"> <!--should shrink to fit vertically and horizontally --> 
     <img src="http://i.imgur.com/D08iV30.jpg"> <!-- should fit inside picture-container and maintain aspect ratio --> 
    </div> 
    <div class="button-container"> <!-- should not shrink --> 
     <span>button</span> 
    </div> 
</div> 

CSS：

.container { 
    border: 1px solid black; 
    height: 300px; 
    width: 300px; 
    display: flex; 
    flex-direction: column; 
} 
.title-container { 
    flex-shrink: 0; 
} 
.button-container { 
    flex-shrink: 0; 
} 
.picture-container { 
    flex-shrink: 1; 
    display: flex; 
    flex-direction: column; 
} 
.picture-container img { 
    flex-shrink: 1; 
} 

的jsfiddle證明問題：here

使用flexbox該解決方案所沒有的。唯一的要求是標題和按鈕區域不縮小，內容區域縮小，使得所有三個區域在container中都垂直和水平均適合，並且內容區域中的圖像適合內容區域，從而保留寬高比。

在此先感謝您的幫助。

Answer 1

如果不是img您使用background-image爲div.picture-container，您可以使用cover or contain在後臺保持高寬比（fiddle）：

HTML：

<div class="container"> 
    <div class="title-container"> 
     <h1>Title</h1> 
    </div> 
    <div class="picture-container" style="background-image: url(http://i.imgur.com/D08iV30.jpg)"> 
    </div> 
    <div class="button-container"> 
     <span>button</span> 
    </div> 
</div> 

CSS

.container { 
    border: 1px solid black; 
    height: 300px; 
    width: 300px; 
    display: flex; 
    flex-direction: column; 
} 
.title-container { 
    flex-shrink: 0; 
} 
.button-container { 
    flex-shrink: 0; 
} 
.picture-container { 
    flex: 1; 
    background-size: cover; /** you can use contain if you want to prevent image cropping **/ 
    background-repeat: no-repeat; 
}