$$demo <img src="/诸葛亮.jpg" class="img preview" /> <img src="/jinji.jpg" class="img preview" /> <img src="/jinji-2.jpg" class="img preview" />

<script> for (let img of document.querySelectorAll(".preview")) { // 知识点：DOM 操作 // https://3yya.com/courseware/chapter/162

    img.onclick = function () {
        let container = document.createElement("div")
        container.classList.add("preview-container")
        container.onclick = function () {
            container.remove()
        }

        let innerImg = document.createElement("img")
        innerImg.classList.add("image")
        innerImg.src = img.src

        container.onwheel = function (event) {
            const width = getComputedStyle(innerImg).width.slice(0, -2)
            const height = getComputedStyle(innerImg).height.slice(0, -2)

            if (event.deltaY > 0) {
                innerImg.style.width = width * 1.2 + "px"
                innerImg.style.height = height * 1.2 + "px"
            } else if (event.deltaY < 0) {
                innerImg.style.width = width * 0.8 + "px"
                innerImg.style.height = height * 0.8 + "px"
            }
        }

        container.append(innerImg)

        document.body.append(container)
    }
}

</script> <style> body { min-height: 600px; } .img { width: 200px; height: 200px;

    border: 1px solid black;

    object-fit: contain;
}

.preview {
    cursor: pointer;
}
.preview-container {
    background-color: rgba(0, 0, 0, 0.6);

    /* 占满整个屏幕 */
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    cursor: pointer;

    /* 子元素水平上下居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-container .image {
    max-width: 90vw;
    max-height: 90vh;

    object-fit: contain;
}

</style> $$