现在图片是根据弹窗适应大小，如果图片太小，我想要放大缩小怎么实现最方便-Go服务器开发

为了实现一个可放大和缩小的图片查看功能，可以通过以下几种方式来实现。下面是一种常见的方法，使用鼠标滚轮进行缩放，同时允许用户拖动以移动图片。

我们将对原有的模态框代码进行一些修改，并添加适当的 CSS 和 JavaScript 代码：

HTML & JavaScript

for (let i = 0; i < dialogData.data.attachmentList.length; i++) {
    const fileUrl = dialogData.data.attachmentList[i].fileUrl;
    const link = $('<a class="link view">').attr('href', fileUrl).text(dialogData.data.attachmentList[i].fileName);

    link.on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();

        let imageUrl = '../d/exemptionReduction/selectPictureById?id=' + dialogData.data.attachmentList[i].id;

        let modalHtml = `
            <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <div id="imageContainer" style="overflow: hidden; position: relative;">
                                <img id="imagePreview" src="${imageUrl}" alt="Image Preview" style="max-width: 100%; cursor: move;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>`;

        $('body').append(modalHtml);
        $('#imageModal').modal('show');

        // Zoom functionality
        let scale = 1;
        
        const imgElement = $('#imagePreview');

        $('#imageContainer').on('wheel', function(e) {
            e.preventDefault();
            if (e.originalEvent.deltaY < 0) {
                scale *= 1.1; // Zoom in
            } else {
                scale /= 1.1; // Zoom out
            }
            imgElement.css('transform', `scale(${scale})`);
        });

        // Drag functionality
        let isDragging = false;
        let startX, startY;

        imgElement.on('mousedown', function(e) {
            isDragging = true;
            startX = e.pageX - imgElement.position().left;
            startY = e.pageY - imgElement.position().top;
            $(this).css('cursor', 'grabbing');
        });

        $(document).on('mouseup', function() {
            isDragging = false;
            imgElement.css('cursor', 'move');
        });

        $(document).on('mousemove', function(e) {
            if (isDragging) {
                let xPos = e.pageX - startX;
                let yPos = e.pageY - startY;
                imgElement.css({ top: yPos + 'px', left: xPos + 'px' });
            }
        });

        $('#imageModal').on('hidden.bs.modal', function () {
            $('#imageModal').remove();
        });
    });

    self.uploadImageBtn.after(link).hide();
}

CSS（可以添加到你的样式表中）

#imageContainer {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

#imagePreview {
    transition: transform 0.2s ease; /* 添加平滑过渡效果 */
}