Question

CSS Flexbox新手在这里。

我试图用

来实现布局

固定高度标题
占用所有可用空间并显示图像的内容区域。
固定高度的页脚

enter image description here

我使用以下flexbox代码：

＆＃13;

<html style="height: 100%;">
    <body style="height: 100%;">
  
        <div style="display: flex; flex-direction: column; height: 100%;">
            <div style="background-color: rgba(255, 0, 0, .1)";>
                Header
            </div>
    
            <div style="flex: 1; background-color: gray;">        
                content
            </div>
    
            <div style="background-color: rgba(0, 0, 255, .1)">
                Footer
            </div>
        </div>  
  </body>
</html>

＆＃13;

这很有效。现在我想在内容区域内显示图像。对于小图像，这很好用：

<!-- Inside the content div... -->
<img src="..." />

enter image description here

然而，对于大图像，图像溢出其容器： - （

enter image description here

（请注意小马是如何延伸到内容区域，与页脚重叠以及其他内容。）

我已尝试在img上设置 max-height：100％，但它仍会溢出容器。我该如何解决这个问题？

Answer 1

<html style="height: 100%;">
    <head>
       <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body style="height: 100%;">

        <div style="display: flex; flex-direction: column; height: 100%;">
            <div style="background-color: rgba(255, 0, 0, .1)";>
                Header
            </div>

            <div style="flex: 1; background-color: gray;">        
                content
                <img src="dog.svg" id="imge" />
            </div>

            <div style="background-color: rgba(0, 0, 255, .1)">
                Footer
            </div>
        </div>  
  </body>
</html>

#imge{
      position:absolute;
      width: 99%;
      margin-left: -3%;
      height: 96%;
}

使用svg图像不会妨碍图片的质量，当您减少或增加图像的大小时，此代码将也可以使用响应式布局。

Answer 2

我也是一个flexbox新手，所以我不知道如何/或者Flexbox是否可以实现这一目标。

但是css背景图片可以很容易地做到这一点...... （没有IE＆gt; = 8支持）http://caniuse.com/#feat=background-img-opts

我刚在内容区域添加了一个div。将其设置为绝对位置，顶部，右侧，底部和左侧为0。（并且不要忘记将其父母设置为相对位置。）

然后将其设置为：

background-size: contain;
background-repeat: no-repeat;
background-position:center;

http://codepen.io/xenocide/pen/xGwaBm/

如何使弹性框约束图像高度？

2 个答案: