如何使 flexbox 约束图像高度？答案

【问题标题】：How can I make a flexbox constrain image height?如何使 flexbox 约束图像高度？
【发布时间】：2021-05-01 17:12:53
【问题描述】：

这里是 CSS Flexbox 新手。

我正在尝试使用

实现布局

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

我使用以下 flexbox 代码完成了这项工作：

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

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

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

但是，对于大图像，图像会溢出其容器 :-(

（请注意小马如何延伸到内容区域之外，与页脚重叠，甚至超出。）

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

【问题讨论】：

发布这个问题后，我意识到我可以通过去掉元素并在内容 div 上设置背景图像来完成这项工作，背景大小：包含，背景重复：不重复。尽管如此，我很好奇如何在 flexbox 中包含。

标签： css flexbox

【解决方案1】：

我也是一个 flexbox 新手，所以我不知道 flexbox 如何/是否可以实现这一点。

但是 css 背景图片可以轻松做到这一点... （没有 IE >= 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/

【讨论】：

是的，如果您查看原始问题的 cmets，我也有同样的发现。但是，我仍然想知道如何使用图像元素而不是 CSS 背景图像样式来做到这一点。

【解决方案2】：

使用 SVG 图片不会影响图片质量，当您减小或增加图像的大小时，下面的代码将也适用于响应式布局。

<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%;
}

【讨论】：

.jpg 和 .png 图像在拉伸或收缩时无法保留图像的质量，如果您使用 svg 图像，它将帮助您。
我不想拉伸图像。我想缩小包含图像；也就是说，在保留纵横比的同时，在必要时缩小它。