有什么方法可以防止图像拉伸 parent (flexbox)？

Question

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

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

*, *: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 did . As I explained in 相同的问题，有一个没有 JavaScript 的实际方法。您遇到的问题是图像的大小需要调整为屏幕的剩余高度，从屏幕大小中减去 .header 和 .footer 的高度。

为 .header 和 .footer 指定 height 的最简单解决方案，为中间的所有内容指定 max-height。

*,: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.

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

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

希望对您有所帮助。 ^^

有什么方法可以防止图像拉伸 parent (flexbox)？

Is there any way to prevent images from stretching it's parent (flexbox)?

css

flexbox