img width 100% in display: box (css flexbox parent)

Posted 2023-03-06

【中文标题】img width 100% in display: box (css flexbox parent)

【英文标题】：

【发布时间】：2011-07-23 14:08:28

【问题描述】：

我正在尝试将图像调整为其父 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>

【参考方案1】：

浏览器？

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

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

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

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

【讨论】：

我在发布问题时删除了浏览器前缀；我现在已经恢复了它们；仍然没有调整大小。

是的，你是对的。看起来 flexbox 模型的行为与块模型不同。它的行为似乎更像标准表格布局，其中每个框内的元素都可以拉伸父元素。尝试调整窗口大小：jsfiddle.net/kmiyashiro/RFqPM/3

是的。关于如何让子图像在显示框中调整为 100% 的任何想法？

【参考方案2】：

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

IMAGE 
  display: -moz-box;
  -moz-box-flex: 1;

#cont 
  -moz-box-orient: horizontal;
  display: -moz-box;

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

【参考方案3】：

虽然这是一个老问题，但它仍然出现在搜索中，因此希望更新答案：

目前在 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" />
  </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%;