CSS Flexbox图像缩小

Question

我正在一个网站上工作，有一个CSS flexbox问题。基本上，我有一个固定高度和宽度的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演示问题：此处为

解决方案不必使用flexbox。唯一的要求是标题和按钮区域不收缩，内容区域收缩以使所有三个区域都垂直和水平地适合container，并且内容区域中适合内容区域的图像保持纵横比。

提前感谢您的帮助。

Answer 1

如果div.picture-container不使用img，而是使用background-image，则可以在后台使用cover或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;
}