使圖像縮放以保持其寬高比，同時適合安裝在flexbox中

Question

考慮以下代碼：

 * { box-sizing: border-box; margin: 0; } .container { display: flex; flex-direction: column; align-items: stretch; width: 400px; height: 200px; padding: 10px; background: red; } .box { flex: 1; } .box img { object-fit: contain; } 

 <div class="container"> <h1>lorem ipsum</h1> <figure class="box"> <img src="http://lorempixel.com/400/200/"> </figure> </div> 

我希望object-fit: contain使img縮小為.box ，並由flex容器自動調整大小。 出乎我的意料，它從盒子里溢出了。 我的代碼有什么問題？

Answer 1

.box應該display:flex以便img可以在.box “增長”。

 * { box-sizing: border-box; margin: 0; } .container { display: flex; flex-direction: column; width: 400px; height: 200px; padding: 10px; background: red; } .box { display: flex; flex: 1; overflow: hidden; } .box img { object-fit: contain; } 

 <div class="container"> <h1>lorem ipsum</h1> <figure class="box"> <img src="http://placehold.it/400x200"> </figure> </div> 

https://www.codeply.com/go/k0gsZbwwRq