fancybox 超出页面边界

问题遇到的现象和发生背景

自己尝试实现了一个 fancybox，发现总是超出边界。

问题相关代码
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .fancybox-overlay{
        position: fixed;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        z-index: 8010;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .fancybox-wrap{
        z-index: 8030;
    height: 100vh;
    }

    .fancybox-skin {
        padding: 15px;
        resize: both;
    height: 100vh;
    }

    .fancybox-skin{
        background: #f8f9fa;
        border-radius: 4px;
        box-shadow: 0 10px 25px rgb(0 0 0 / 50%);
    }

    img.fancybox-image {
        width: auto;
        height: 100%;
    }
</style>
<body>
    <div class="fancybox-overlay">
        <div class="fancybox-wrap">
            <div class="fancybox-skin"><img class="fancybox-image" src="https://res.weread.qq.com/wrepub/epub_26211947_194"></div>
        </div>
    </div>
</body>
</html>
运行结果

img

我的解答思路和尝试过的方法

没有系统学习过 CSS，所以只是凭感觉不断尝试、不断试验，没能将问题解决。

我想要达到的结果

希望 fancybox 不会超出页面。