Css 如何使flexbox约束图像高度？_Css_Flexbox

Css 如何使flexbox约束图像高度？

css

Css 如何使flexbox约束图像高度？,css,flexbox,Css,Flexbox,这里是CSS Flexbox新手我正试图实现一个布局与固定高度的收割台占用所有可用空间并显示图像的内容区域固定高度的页脚我使用以下flexbox代码实现了这一点：标题内容页脚使用SVG图像不会影响图像质量，当您减小或增大图像的大小时，将显示以下代码同样适用于响应性布局 <html style="height: 100%;"> <head> <link rel="stylesheet&

这里是CSS Flexbox新手

我正试图实现一个布局与

固定高度的收割台
占用所有可用空间并显示图像的内容区域
固定高度的页脚

我使用以下flexbox代码实现了这一点：


标题
内容
页脚

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


标题
内容
页脚
#伊姆奇{
位置：绝对位置；
宽度：99%；
左边缘：-3%；
身高：96%；
}

我也是flexbox的新手，所以我不知道flexbox是如何做到的

但是css背景图像可以很容易地做到这一点。。。（无IE>=8支持）

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

然后将其设置为：

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

在发布了这个问题后，我意识到我可以通过去除元素，而不是在内容div上设置背景图像，背景大小：contain，背景重复：no repeat来完成这项工作。尽管如此，我还是很好奇如何在flexbox中包含一个。jpg和.png图像在拉伸或收缩时无法保持图像的质量，如果您使用svg图像，它将对您有所帮助。我不想拉伸图像。我想缩小包含图像的图像；也就是说，在保留纵横比的同时，如果必要的话可以缩小它。是的，如果你查看原始问题的注释，我也有同样的发现。然而，我仍然想知道如何使用图像元素，而不是CSS背景图像样式来实现这一点。