2

I am trying to resize an image to be the width of its parent div; normally width: 100%; works fine, but when the parent has display: box; the img is not resized. Giving the child image box-flex: 1 has no effect.

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

3 回答 3

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%;
    }
于 2013-02-20T14:36:18.887 回答
2

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

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

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

于 2011-05-15T21:04:57.983 回答
1

浏览器？

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

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

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

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

于 2011-03-26T22:24:33.043 回答