Question

我有一个带滚动条的空div：

<div id="figure1" style="width:1000px; height:300px; overflow:scroll;"></div>

使用javascript我将图像添加到div：

function add_img(imgID, src, x, y, height, width){
    var img = document.createElement("img");
    img.setAttribute('id', imgID);
    img.setAttribute('src', src);
    img.style.left = x;
    img.style.top = y;
    img.style.width = width;
    img.style.height = height;
    img.style.position = 'absolute';
    document.getElementById('figure1').appendChild(img);
}

当我在1000x300px框外添加新图像时，我希望只有在使用滚动条时才能看到该图像。

相反，位于框外的图像溢出图1的边缘。滚动条不会执行任何操作。

如何阻止图像溢出？

谢谢！

Answer 1

我看到两个问题 - 首先你需要将+ "px"添加到你的维度（至少如果你像我一样使用整数类型参数）。

另一件事是不使用position = "absolute"。例如，position = "relative"似乎可以解决问题。（如果你愿意，可以进一步阅读CSS中的布局选项，祝你好运）

https://jsfiddle.net/xpsu9usw/

添加到div的图像不受滚动条的影响

1 个答案: