让我的图像占用不超过父容器可用宽度的100％.我只是在Firefox 36(不是IE或Chrome)中注意到这个问题.那么这是一个firefox bug还是我在这里遗漏的东西？
注意：图像不应大于其原始大小.
铬：
火狐：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexBox {
display:flex;
}
.flexBox .column {
flex:1;
background-color: red;
}
.flexBox .middleColumn {
flex:3;
}
.flexBox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexBox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
解决方法
如果要让其缩小到最小内容宽度(其< img> -child的固有宽度),则需要在.middleColumn上添加min-width：0.
否则,它会获得新的默认值min-width:auto,在Flex项目上,它将基本上使其拒绝收缩低于其收缩尺寸.
(Chrome hasn’t implemented min-width：auto.我被告知IE在其下一代渲染引擎中,所以我希望这个版本应该像Firefox这样的,就像Chrome一样,一旦实现了这个功能.)
那个固定的片段：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width:300px;
}
.flexBox {
display:flex;
}
.flexBox .column {
flex:1;
background-color: red;
}
.flexBox .middleColumn {
flex:3;
min-width:0;
}
.flexBox .middleColumn img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
align-self: center;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="flexBox">
<div class="column">This is the left column!</div>
<div class="middleColumn">
<img src="http://placehold.it/400/333333">
</div>
<div class="column">This is the right column!</div>
</div>
</div>
</body>
</html>
