想写这样一个布局,顶部一个定高度的div,下面一个不定高度的img,占据余下的空间。

用flex的flex属性分别设定为none和auto。但是发现图片始终是其原本大O = ` r小。若设定图片的css height 小于原[ y 9 P p C X g 7本大小,图片高度可以被放大,但是宽度被限制为设定高度的[ # s等比例缩放。如图所示:

若设定css height 大于原本大小,那么图片的尺寸仍然是原本大小。如图所示:

如果去掉img的src属性,那么是正常的,如图所示:

源码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF7 M . . n G-8"&x b + [ %gt;
<meta name="viewport" content="width=device-% R [ ) W \ + Mwidthq ! n, initial-scale=1.0">
<meta http-equiv="X-UA-Compa& x | 8 e 8 E Ltible" content="ie=edge">
<title>Document</title>
<style9 o W ) d r 8 }>
body
{
padding:0;
margin:0;
}
#container
{
displa` ) G V Cy: flex;
flex-direction: column;
align-items:center;
position:100vw;
height:100vh;
}
#div
{
flex:0 0 auto;
width:100%;
height:100px;
bacZ F Fkground-a t l } \cU , & Polor:aliceblue;
}
#img
{
flex:1 1 auto;
heigp ; L lht:1600pxa 5 3 h 3;
/* width:100%; */
/* heigz ? L : s : V Dht:160px; */
backgf Y } X m Q Qround-color:antiquewhite;
}
</style>
</head>
<body>
<div id='container'>
<div id='div'></div>
<img id='img' src='http://skywingjiang.g2 Y Uitee.io/changexingpicture/Chapter17 s - ; e - ~/1.jpg'/>
<!-- <img id='img'/> --N @ 2 ! e R>
</dZ \ V g k +iv>
</body>
</html>

我想问的是:是否3 l 2 b +是img的图片的原本大小会覆盖flex的计算大小?

回答

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注