html - 强制将 img 放入作为 flex 元素的 div

Question

我有一个 div，其高度由封闭的 div 上的 flex 显示定义。目的是在这个 div 中显示图像。

我的 HTML5 代码是:

#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#container {
  flex:  1 0 auto; 
  border: 1px solid red ;
}
img {
  height:100%;
}
header,footer {
  flex: 0 0 20px;
  background-color:#aaa;
}

<div id="box">
<header>
  this is the header text
</header>
<div id="container">
  <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg"/>
</div>
<footer>
  this is the footer text
</footer>
</div>

#container div 大小合适，适应窗口高度，但是img 超过div 高度...我希望img 高度适合div!我希望我能找到一个纯 CSS3 的解决方案，避免使用 JavaScript。

感谢您的帮助，

让-大卫

Answer 1

您只需要将 max-width: 100% 添加到图像元素即可。

#box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
#container {
  flex:  0 1 auto; 
  border: 1px solid red ;
}
img {
  max-width: 100%;
  height:100%;
}
header,footer {
  flex: 0 0 20px;
  background-color:#aaa;
}

<div id="box">
<header>
  this is the header text
</header>
<div id="container">
  <img src="http://cimus.eu/editions/(mi)chile/webcimus/hd/001.jpg"/>
</div>
<footer>
  this is the footer text
</footer>
</div>