css - 图片宽度 : auto in block with position: absolute

Question

浏览器:google-chrome >43.x

如果我调整包含以下内容的窗口高度:

div {
  position: absolute;
  top: 50px;
  bottom: 0;
}
div img {
  height: 100%;
  width: auto;
}

<div>
  <img src="http://placehold.it/100x100" />
</div>

http://jsfiddle.net/5ohw433s/

然后方形图像变成矩形；

图像的切换高度我可以恢复它，但它看起来很难看并且没有完全解决问题:

http://jsfiddle.net/5ohw433s/1/

其他解决方案是设置 height: 900vh 和 max-height: 100%

http://jsfiddle.net/5ohw433s/2/

但它仍然有问题，因为如果我调整父 block 的大小(通过 :hover)

http://jsfiddle.net/5ohw433s/3/

div {
  position: absolute;
  top: 10px;
  bottom: 0;
  transition: top 0.1s;
}
div:hover {
  top: 50px;
}
div img {
  max-height: 100%;
  height: 100vh;
  width: auto;
}

<div>
  <img src="http://placehold.it/100x100" />
</div>

又失败了。

这个问题有什么好的解决办法吗？

Answer 1

将图像显示设置为 block 应该可以正常工作。检查Updated Fiddle .