html - 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 演示问题: here

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

预先感谢您的帮助。

Answer 1

如果您使用 background-image 作为 div.picture-container 而不是 img，则可以使用 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;
}