窗口拖动，图片缩放与垂直居中的问题

Question

我最近在用electron框架，做一个漫画阅读器
现在遇到如下问题，

我想让我的阅读器，在单页模式显示时，
图片垂直居中显示，且尺寸不超出容器。

<div>
    <img src="./image.png" alt="image" />
</div>

div {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

不拖拉窗口的时候，图片可以按照预期样子显示。
但是一旦拖拉窗口，图片就会发生变形。不过刷新之后，又回恢复正常。

如果改变dom结构，去掉<img />，让图片作为div的背景显示的话，
可以解决拖动变形的问题，但切换图片时，会有的闪烁效果，刺瞎狗眼。

（ GIF 图片一直上传失败，看这里吧 ）

请问我该怎么做，既能防止图片变形，又不出现闪烁效果

Answer 1

img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}