图像没有在chrome扩展中被剪裁

Question

我所拥有的是我从存储中的内容脚本保存图像的源dataURL，并在扩展脚本中检索它们。

我使用迭代值的唯一ID创建了每个图像标记。 然后我创建了一个DIV dag并在其中添加了图像标记。

问题是图像在长度X宽度方面非常大，我需要根据从存储中检索的高度和宽度参数将它们剪裁到合适的大小。

当我应用剪切具有适当值的矩形的css属性时，没有任何反应。图像保持相同的大小。

以下是描述相同内容的截图。

正如您在右侧屏幕截图中看到的那样，div的大小显示为1351 X 672，而裁剪属性的大小为1321 X 137.

并且div上应用的max-height和max-width也不起作用。

请帮我删除图片的额外部分。

扩展程序脚本：

$(document).ready(function() {
    chrome.storage.local.get("list",function(data){
        var list=data.list;
        for(var i=0;i<list.length;i++) {

            //---------extract some important data stored in the storage----------
            var src=list[i].src;
            var note=list[i].note;
            var height=list[i].height;
            var width=list[i].width;

            //--------------creating image tag-----------
            var img=document.createElement("img");
            img.setAttribute("id","myimg");
            img.setAttribute("src",src);
            img.setAttribute("id",i);

            var div=document.createElement("div");
            div.appendChild(img);
            div.setAttribute("max-height","300px");
            div.setAttribute("max-width","500px");
            div.style.overflow="scroll";

            $("body").append(div);

            $("#"+i).css("clip","rect(0px,"+width+"px,"+height+"px,0px)");
        }
    });
});