在flexbox中填充<img>并保留没有JavaScript的长宽比

Question

标题说明了一切。我正在寻找一种解决方案，在不考虑使用background-size或任何其他解决方法的情况下，同时尊重宽高比，以使img标记填充父级（图像和父级未知大小）。我需要与图像块具有该图片的大小（其中background-size不）。我尝试了很多东西，比如min-width和min-height，一些奇怪的东西用zoom，很多组合width/height: 100%/auto/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>

Answer 2

height:auto应该做的魔力：

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

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

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

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