Firefox flexbox图像宽度
Dre*_*ing 13 html css firefox flexbox
我在使图像占用不超过父容器可用宽度的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>dho*_*ert 30
min-width:0如果要允许它缩小到其最小内容宽度(其子<img>节点的固有宽度)以下,则需要添加.middleColumn.
否则,它会获得新的默认值min-width:auto,在弹性项目上它将基本上使其拒绝缩小到其收缩包装大小以下.
(Chrome 还没有实现 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>| 归档时间： |
|
| 查看次数： |
6634 次 |
| 最近记录： |