在flexbox中填充<img/>并在不使用JavaScript

时间:2015-06-27 18:30:16

标签: css flexbox

标题说明了一切。我正在寻找一种解决方案,使img标记填充父级(图像和父级的大小未知),同时尊重宽高比,同时不使用background-size或任何其他解决方法。我需要带有图像的块具有该图片的大小(background-size没有)。我尝试了许多内容,例如min-widthmin-heightzoom的一些奇怪的事情,width/height: 100%/auto/0的许多组合。

编辑:我应该用原文说明。我想要显示整个图像,而不仅仅是从中裁剪一部分。因此,正确的结果将在左侧和右侧或顶部和底部具有可用空间(此自由空间不被所述图像占据,仅由容器占据)。

&#13;
&#13;
html, body{
  height: 100%;
  width: 100%;
}

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

#pic {
  width: 100%;
  height: 100%;
}
&#13;
<div id="container">
  <img src="http://i.imgur.com/CtHGCLF.jpg?1" id="pic">
</div>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:2)

如果我理解正确,这将解决问题。

&#13;
&#13;
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%;
}
&#13;
<div id="container">
  <img src="http://i.imgur.com/CtHGCLF.jpg?1" id="pic">
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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>