Firefox flexbox图像宽度 [英] Firefox flexbox image width
问题描述
我有一些麻烦让我的图片占据不超过父容器的可用宽度的100％。我只注意到Firefox 36中的问题（不是IE或Chrome）。那么是一个firefox bug，还是我在这里缺少一些东西？
注意：图片不能大于原始大小。
Chrome：
Firefox：
<！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>这是左栏！< / div> < div class =middleColumn> < img src =http://placehold.it/400/333333> < / div> < div class =column>这是右栏！< / div> < / div> < / div> < / body>< / html>
您需要在.middleColumn上添加 min-width：0 ，如果要允许它缩小到其最小内容宽度 http://dev.w3.org/csswg/css-flexbox-1/#min-size-auto> min-width：auto ，
（Chrome 尚未实现 min-width：auto -gen渲染引擎，所以我希望版本应该像Firefox这样 - 一旦他们实现这个功能，Chrome会一样）。
<！DOCTYPE html>< html& <头> < 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>这是左栏！< / div> < div class =middleColumn> < img src =http://placehold.it/400/333333> < / div> < div class =column>这是右栏！< / div> < / div> < / div> < / body>< / html>
I'm having some trouble getting my image to take up no more than 100% of the available width of the parent container. I'm only noticing the issue in Firefox 36 (not IE or Chrome). So is it a firefox bug or am I missing something here?
Note: The image should never be larger than it's original size.
Chrome:
Firefox:
<!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>
You need to add min-width:0 on .middleColumn, if you want to allow it to shrink below its min-content width (the intrinsic width of its <img>-child).
Otherwise, it gets the new default min-width:auto, which on a flex item will basically make it refuse to shrink below its shrinkwrapped size.
(Chrome hasn't implemented min-width:auto yet. I'm told IE has, in their next-gen rendering engine, so I'd expect that version should behave like Firefox here -- as will Chrome, once they implement this feature.)
Snippet with that fixed:
<!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>
这篇关于Firefox flexbox图像宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
