Question

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

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

＆＃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;

Answer 1

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

＆＃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;

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>

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

2 个答案: