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 / image？

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%;
}

包裹的图像位于100％高度，不重绘

2 个答案: