我无法让我的图像占据父容器可用宽度的 100% 以下。我只注意到 Firefox 36(不是 IE 或 Chrome)中的问题。这是 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;
}
.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>最佳答案
您需要添加 min-width:0在 .middleColumn 上，如果你想让它缩小到它的最小内容宽度以下(它的 <img> -child 的固有宽度)。
否则，它将获得新的默认值 min-width:auto ，这在 flex 元素上基本上会使其拒绝收缩到其 shrinkwrapped 尺寸以下。
(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>关于html - Firefox flexbox 图像宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35631320/