css - 在 flexbox 中填充 并在没有 JavaScript 的情况下保留纵横比

Question

标题说明了一切。我正在寻找一种解决方案，使 img 标签填充父级(图像和父级的大小未知)，同时尊重纵横比，也不使用 background-size 或任何其他解决方法。我需要带有图像的 block 具有该图片的大小(background-size 没有)。我尝试了很多东西，比如 min-width 和 min-height，zoom 的一些奇怪的东西，width/height 的许多组合: 100%/自动/0。

编辑:我应该在原文中说明。我想显示整张图片，而不只是裁剪其中的一部分。所以正确的结果将在左右或顶部和底部有空闲空间(这个空闲空间不被所述图像占用，只被容器占用)。

html, body{
  height: 100%;
  width: 100%;
}

#container {
  border: 2px solid darkblue;
  height: 95%;
  width: 97%;
}

#pic {
  width: 100%;
  height: 100%;
}

<div id="container">
  <img src="http://i.imgur.com/CtHGCLF.jpg?1" id="pic">
</div>

Answer 1

如果我没理解错的话，问题就解决了。

html, body{
  height: 100%;
  width: 100%;
}

#container {
  border: 2px solid darkblue;
  height: 95%;
  width: 97%;
text-align: center;
}

#pic {
  max-width: 100%;
  max-height: 100%;
}

<div id="container">
  <img src="http://i.imgur.com/CtHGCLF.jpg?1" id="pic">
</div>