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父母）

回答

相關問題