Question

我正在尝试将图像的大小调整为其父div的宽度;通常width: 100%;工作正常，但当父级display: box;时，img不会调整大小。给孩子形象box-flex: 1没有效果。

<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
  <img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>

Answer 1

也许你已经解决了这个问题，但你可以使用（为mozilla提供示例）

IMAGE {
  display: -moz-box;
  -moz-box-flex: 1;
}
#cont {
  -moz-box-orient: horizontal;
  display: -moz-box;
}

没有测试过这个例子，在最坏的情况下你需要做一些调整，但我很确定它是正确的。

Answer 2

虽然这是一个老问题，然而，它仍然出现在搜索中，所以想要更新答案：

目前在Chrome 23和Firefox Nightly 21.0a1中，此布局可以使图像保持父div的大小并调整大小（同时保持居中）。

http://jsfiddle.net/qAErr/

HTML

<section id="holdMe">
  <div>
     <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
  </div>
</section>

CSS

#holdMe {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
    }
    #holdMe img {
      width: 100%;
    }

Answer 3

浏览器？

我不知道任何支持没有供应商前缀的flexbox规范的浏览器。

display: -moz-box;和display: -webkit-box;等

实际上，我只是再次查看你的代码......如果你在图像上使用flex，你不需要宽度声明，因为flex动态定义了宽度。

您还应该定义父div的宽度。

img宽度100％显示：框（css flexbox parent）

3 个答案: