包裹的图像定位正确的100％高度不重绘

Question

我有以下设置：

HTML

<div> 
    <img src="https://placehold.it/300x300" /> 
</div> 

CSS

div 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
} 

img 
{ 
    height: 100%; 
} 

当网页加载完毕后它呈现正确。但是，如果我调整浏览器的高度，则图像的左侧保持原位，而图像在视口外部（或内部缩小）展开。

如果我刷新页面，它会立即重绘正确。这个问题似乎出现在所有浏览器中。我发现following question但不确定问题是否完全相同。非JS解决方案不起作用;我没有尝试任何JS建议。

有没有人为什么这可能会发生，并知道修复（使用CSS），使div /图像重新调整时，我调整浏览器？

Answer 1

它是因为浏览器不重绘div，因为它不知道它假设为100％宽。

试试这个设置：

div 
{ 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    width:100%; 
} 

img 
{ 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

Answer 2

看看这个小提琴：https://jsfiddle.net/ash06229/z55827t9/

div 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100vh; 
    width: 100%; 
} 

img 
{ 
    max-height: 100%; 
    max-width: 100%; 
}