css - 有什么办法可以防止图像拉伸(stretch)它的父级(flexbox)？

Question

这个 fiddle 代表了我的问题: http://jsfiddle.net/LmYay/115

我希望我的页面正好是(当前屏幕分辨率的)100% 宽和高。现在发生的事情是图像正在拉伸(stretch)内容框，我不希望图像被缩小以适合内容框(因此页面总是 100% 高)。我可以想到 JS 解决方案，它会检查 parent 的高度，然后将 img 的最大高度设置为 parent 的高度。哦，将 max-height 属性设置为 inherit 也不起作用。

*, *:before, *:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body{
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;
}

body{
    background: #222;
    color: #cccccc;
    font-size: 22px;
}

.flexbox-parent{
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: flex-start; 
    align-items: stretch; 
    align-content: stretch; 
    background: rgba(255, 255, 255, .1);
}

.flexbox-item{
    padding: 8px;
}

.flexbox-item.header{
    background: rgba(255, 0, 0, .1);
}

.flexbox-item.footer{
    background: rgba(0, 255, 0, .1);
}

.flexbox-item.content{
    background: rgba(0, 0, 255, .1);
}

.fill-area{
    display: flex;
    flex-direction: row;    
    justify-content: flex-start; 
    align-items: center; 
    align-content: stretch; 
    flex: 1
}
.fill-area-content{
    background: rgba(0, 0, 0, .3);
}    

<div class="flexbox-parent">
<div class="flexbox-item header">
    Header
</div>

<div class="flexbox-item fill-area content">
    <div class="fill-area-content flexbox-item-grow">

        <div class="my-images">
            <div><img  class="img-responsive-custom" src="http://placehold.it/297x1006.gif" alt=""/> </div>
            </div>
    </div>
</div>

<div class="flexbox-item footer">
    Footer
</div>
</div>

Answer 1

您遇到的问题与 Timmmm 相同做了here .正如我在 my answer 中解释的那样，有一个实际的方法可以在没有 JavaScript 的情况下执行此操作。您遇到的问题是图像的大小需要调整为屏幕的剩余高度，从屏幕大小中减去 .header 和 .footer 的高度。

为 .header 和 .footer 和 max-height 指定 height 的最简单的解决方案s 用于介于两者之间的所有内容。

*,:before,:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}

.k img {
    height:100%
}

html,body {
    width:100%;
    height:100%;
    margin:0;
    padding:0
}

body {
    background:#222;
    color:#ccc;
    font-size:22px;
/* Helvetica/Arial-based sans serif stack */
    font-family:Frutiger,"Frutiger Linotype",Univers,Calibri,"Gill Sans","Gill Sans MT","Myriad Pro",Myriad,"DejaVu Sans Condensed","Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif
}

.flexbox-parent {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
/* align items in Main Axis */
    align-items:stretch;
/* align items in Cross Axis */
    align-content:stretch;
/* Extra space in Cross Axis */
    background:rgba(255,255,255,.1)
}

.flexbox-item {
    padding:8px
}

.flexbox-item-grow {
    flex:1
/* same as flex: 1 1 auto; */
}

.flexbox-item.header {
    background:rgba(255,0,0,.1)
}

.flexbox-item.footer {
    background:rgba(0,255,0,.1)
}

.flexbox-item.content {
    background:rgba(0,0,255,.1)
}

.fill-area {
    display:flex;
    flex-direction:row;
    justify-content:flex-start;
/* align items in Main Axis */
    align-items:stretch;
/* align items in Cross Axis */
    align-content:stretch
/* Extra space in Cross Axis */
}

.fill-area-content {
    background:rgba(0,0,0,.3);
    border:1px solid #000
/* Needed for when the area gets squished too far and there is content that can't be displayed */
}

.header,.footer {
    height:43px
}

.content {
    max-height:calc(100vh - 86px)
}

.k img {
    height:calc(100vh - 102px)
}

<div class="flexbox-parent">
    <div class="flexbox-item header">
        Header
    </div>

    <div class="flexbox-item fill-area content flexbox-item-grow">
        <div class="fill-area-content flexbox-item-grow">
            <div class="k">
                <div><img alt="" class="img-responsive-custom" src="http://placehold.it/297x1006.gif"></div>
            </div>
        </div>
    </div>

    <div class="flexbox-item footer">
        Footer
    </div>
</div>

JSFiddle:http://jsfiddle.net/vL83trtr/

我所做的唯一修改(除了稍微清理一下格式，就是添加到 CSS 中):

.header,.footer {
    height:43px
}

.content {
    max-height:calc(100vh - 86px)
}

.k img {
    height:calc(100vh - 102px)
}

我的想法是，由于您使用的是 flexbox，因此您不必过分担心向后兼容性，因为 vh 和 calc() 是实现这一目标的理想选择当您可以为您需要的所有东西提供固定的高度时。

请注意，height 包括 padding，因此它必须补偿其他类应用的填充。一旦您将值设置为您所需要的值，以这种方式工作肯定可以在较新的浏览器中工作。

如果您确实需要与旧版浏览器兼容，我推荐我为 Timmmm 发布的 JavaScript。

希望对您有所帮助。 ^^