如何使用jQuery将图片加载至Div并进行尺寸调整与定位？

首先你的原代码存在语法错误，var case_1_start.attr('src', 'images/case_1_1.jpg'); 写法不符合JavaScript语法规范，需要先正确创建图片元素对象。下面是两种可行的实现方案：

方案一：创建img元素并监听加载完成事件 #

这种方式能确保图片完全加载后再执行尺寸和定位操作，避免因图片未加载完成导致的尺寸计算失效：

$('#case_1_btn').click(function() {
    // 创建img元素并设置地址
    var case_1_start = $('<img>').attr('src', 'images/case_1_1.jpg');
    
    // 监听图片加载完成事件
    case_1_start.on('load', function() {
        // 调整尺寸：直接设置固定宽高或按比例缩放
        $(this).width(300).height('auto');
        // 定位：以绝对定位为例调整位置
        $(this).css({
            'position': 'absolute',
            'top': '50px',
            'left': '50%',
            'transform': 'translateX(-50%)' // 水平居中
        });
        // 将图片插入目标容器（先清空原有内容）
        $('#content_panel').empty().append(this);
    });
});

方案二：使用load方法加载图片并处理 #

如果坚持使用load()方法，需要确保加载的是图片资源，并在加载成功后操作图片元素：

$('#case_1_btn').click(function() {
    var imgSrc = 'images/case_1_1.jpg';
    // 加载图片到容器
    $('#content_panel').load(imgSrc, function(response, status) {
        if(status === 'success') {
            // 获取容器内的图片元素
            var targetImg = $('#content_panel img');
            // 调整尺寸：设置最大宽度限制
            targetImg.css('max-width', '100%').css('height', 'auto');
            // 定位：相对定位调整位置
            targetImg.css({
                'position': 'relative',
                'top': '20px',
                'margin-left': '30px'
            });
        }
    });
});

核心注意事项 #

• 必须等待图片加载完成后再调整尺寸，否则无法获取图片真实宽高，导致设置无效。
• 定位方式可根据需求选择absolute、relative、fixed等，配合top、left、margin、transform等属性实现精准定位。
• 若需要响应式适配，可结合CSS媒体查询，或在窗口resize事件中重新计算并调整图片尺寸。

内容的提问来源于stack exchange，提问作者IlludiumPu36