$$demo <img src="https://3yya.com/%E8%AF%B8%E8%91%9B%E4%BA%AE.jpg" class="img preview" /> <img src="https://3yya.com/jinji.jpg" class="img preview" /> <img src="https://3yya.com/jinji-2.jpg" class="img preview" />

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

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

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

        container.onwheel = function (event) {
            const width = parseFloat(getComputedStyle(innerImg).width)
            const height = parseFloat(getComputedStyle(innerImg).height)

            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: 480px; } .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 {
    /* 最大视窗大小的 90% */
    max-width: 90vw;
    max-height: 90vh;

    object-fit: contain;
}

</style> $$ $$answer

$$jsdemo$$
$$edit$$
<img
    src="https://3yya.com/%E8%AF%B8%E8%91%9B%E4%BA%AE.jpg"
    class="img preview"
/>
<img src="https://3yya.com/jinji.jpg" class="img preview" />
<img src="https://3yya.com/jinji-2.jpg" class="img preview" />

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

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

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

            container.onwheel = function (event) {
                if (event.deltaY < 0) {
                    innerImg.style.width = `${innerImg.clientWidth * 1.2}px`
                    innerImg.style.height = `${innerImg.clientHeight * 1.2}px`
                } else if (event.deltaY > 0) {
                    innerImg.style.width = `${innerImg.clientWidth * 0.8}px`
                    innerImg.style.height = `${innerImg.clientHeight * 0.8}px`
                }
            }

            container.append(innerImg)

            document.body.append(container)
        }
    }
</script>
<style>
    .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 {
        /* 最大视窗大小的 90% */
        max-width: 90vw;
        max-height: 90vh;

        object-fit: contain;
    }
</style>

$$

点击查看实例讲解