IMG宽度100％在显示：框（CSS flexbox父母）

我想调整图像的大小，其父div的宽度;通常width: 100%;工作正常，但当父母有display: box; IMG不调整大小。给孩子图片box-flex: 1没有效果。IMG宽度100％在显示：框（CSS flexbox父母）

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

来源

2011-03-26 Kevin L.

浏览器？

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

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

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

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

来源

2011-03-26 22:24:33 kmiyashiro

我删除了浏览器的前缀，当我张贴的问题;我现在已经恢复了他们;仍然没有调整大小。 – 2011-03-28 04:22:16

是的，你说得对。看起来Flexbox模型的行为与块模型不同。它似乎更像是标准表格布局，每个框中的元素可以伸展父级。尝试调整窗口大小：http://jsfiddle.net/kmiyashiro/RFqPM/3/ – kmiyashiro 2011-03-28 20:07:07

是的。关于如何让儿童图像在显示框中调整到100％的任何想法？ – 2011-03-29 03:59:26

也许你已经解决了这个，但你可以使用（例如提供的Mozilla）

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

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

来源

2011-05-15 21:04:57 Flanders

诚然，这是一个老问题，但是，它仍然显示在搜索，以便想一个答案更新：

目前在Chrome 23和Firefox每晚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-20 14:36:18 Jimmerz28

IMG宽度100％在显示：框（CSS flexbox父母）

回答

相关问题