Wrapped image positioned right 100% height not redrawing

Question

I have the following setup:

HTML

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

CSS

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

img
{
    height: 100%;
}

When I load the page it renders correctly. However, if I adjust the height of the browser, the left side of the image remains in place while the image expands outside (or shrinks inside) of the viewport.

If I refresh the page then it immediately redraws correctly. The issue appears to be present in all browsers.

I found the following question but not sure if the issue is quite the same. The non-JS solutions didn't work; I didn't attempt any of the JS suggestions.

Does anyone why this might be happening and know of a fix (using CSS) to make the div/image redraw when I resize the browser?

Answer 1

Its because the browser doesnt redraw the div as it does not know it suppose to be 100% wide.

Try this setup:

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

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

Answer 2

Check out this fiddle: https://jsfiddle.net/ash06229/z55827t9/

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

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