帮助调整容器中的图像大小

Question

好的，所以我只是想正确调整div的大小并让其中的图像调整大小。

以下是动态生成的容器和图像的示例：

<div id="imgD' + i + '" style="border:1px solid red;display:inline-block;position:absolute;">
    <img alt="Big" id="imgA' + i + '" width="' + Math.round(resourceData[i][2] * currentScale) + '" height="' + Math.round(resourceData[i][3] * currentScale) + '" src="' + uploadFolder + '/' + imgData[resourceData[i][1]][1] + '" />
</div>

然后图像将Jquery resizable添加到其上，并且容器上添加了draggable。一切正常。直到我尝试在客户端'放大'时调整两个元素的大小。

这是我的调整大小代码：

        $('#imgD' + i).css("width", (resourceData[i][2]*currentScale));
        $('#imgD' + i).css("height", (resourceData[i][3]*currentScale));

        // Lets try every combination, like a hero!
        $('#imgA' + i).css("width", (resourceData[i][2]*currentScale));
        $('#imgA' + i).css("height", (resourceData[i][3]*currentScale));
        $('#imgA' + i).attr("width", (resourceData[i][2]*currentScale));
        $('#imgA' + i).attr("height", (resourceData[i][3]*currentScale));

        $('#imgD' + i).css("left",(resourceData[i][4]*currentScale) + "px");
        $('#imgD' + i).css("top", (resourceData[i][5]*currentScale) + "px");

图像右下角的调整大小图标表示这是与jquery可调整大小相关的问题吗？

Answer 1

我恐怕没有答案，但你可以通过链接元素的方法来优化你的代码，如下所示：

     $('#imgD' + i).css({  width: (resourceData[i][2]*currentScale),
                          height: (resourceData[i][3]*currentScale)});
// Lets try every combination, like a hero!
     $('#imgA' + i).css({  width: (resourceData[i][2]*currentScale),
                          height: (resourceData[i][3]*currentScale)})
                   .attr({ width: (resourceData[i][2]*currentScale),
                          height: (resourceData[i][3]*currentScale)});
     $('#imgD' + i).css({   left: (resourceData[i][4]*currentScale) + "px",
                             top: (resourceData[i][5]*currentScale) + "px"}); 

Answer 2

Jquery可调整大小为图像添加了一个DIV。

('#imgA' + i).parent().css("width", (resourceData[i][2]*currentScale));
$('#imgA' + i).parent().css("height", (resourceData[i][3]*currentScale));
$('#imgA' + i).css("width", (resourceData[i][2]*currentScale));
$('#imgA' + i).css("height", (resourceData[i][3]*currentScale));

使用父选择器调整该div的大小。