Firefox flexbox 图像宽度 [英] Firefox flexbox image width

查看：20
本文介绍了Firefox flexbox 图像宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在让我的图像不超过父容器可用宽度的 100% 时遇到一些问题.我只注意到 Firefox 36(不是 IE 或 Chrome)中的问题.那么这是一个 Firefox 错误还是我在这里遗漏了什么?

注意:图片不得大于原始尺寸.

铬:

火狐:

<头><style type="text/css">.容器 {宽度:300px；}.flexbox {显示:弹性；}.flexbox .column {弹性:1;背景颜色:红色；}.flexbox .middleColumn {弹性:3；}.flexbox .middleColumn img {宽度:自动；高度:自动；最大宽度:100%；最大高度:100%；对齐自我:居中；显示:块；}</风格><身体><div class="容器"><div class="flexbox"><div class="column">这是左列！</div><div class="middleColumn"><img src="http://placehold.it/400/333333">

<div class="column">这是正确的列！</div>

</html>

解决方案

你需要在 .middleColumn 上添加 min-width:0，如果你想让它缩小到它的 min-content 以下宽度(其 -child 的固有宽度).

否则，它会获得新的默认值 min-width:auto，它在弹性项目上基本上会使其拒绝缩小到其收缩包装尺寸以下.

(Chrome 尚未实施 min-width:auto .我听说 IE 在他们的下一代渲染引擎中有，所以我希望这个版本的行为应该像 Firefox 一样——Chrome 也一样，一旦他们实现了这个功能.)

已修复的代码段:

<头><style type="text/css">.容器 {宽度:300px；}.flexbox {显示:弹性；}.flexbox .column {弹性:1;背景颜色:红色；}.flexbox .middleColumn {弹性:3；最小宽度:0;}.flexbox .middleColumn img {宽度:自动；高度:自动；最大宽度:100%；最大高度:100%；对齐自我:居中；显示:块；}</风格><身体><div class="容器"><div class="flexbox"><div class="column">这是左列！</div><div class="middleColumn"><img src="http://placehold.it/400/333333">

<div class="column">这是正确的列！</div>

</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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆