Question

这个小提琴代表我的问题： http://jsfiddle.net/LmYay/115

我希望我的页面正好100％（当前屏幕分辨率）宽和高。现在正在发生的事情是图像是拉伸内容框，我想要缩小图像以适应内容框（因此页面始终是100％高）。我可以想到JS sollution将检查父亲的身高，然后将img的max-height设置为父亲的身高。哦，将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的高度。

为height以及.header和.footer指定max-height s的最简单的解决方案。

＆＃13;

*,: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)
}

＆＃13;

<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>

＆＃13;

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。

我希望这会有所帮助。 ^^

有没有办法阻止图像拉伸它的父（flexbox）？

1 个答案: