在javascript函数之后，图像边距没有推到浏览器页面的边缘

Question

所以我有一个 javascript 函数，可以随机散布图像。

浏览器/页面窗口会自动调整大小以适应这些图像（您不能滚动超过图像/浏览器窗口的边缘是最远图像的外边缘）。

但为什么边距没有进一步推动该边界？

所以图像在窗口边缘之前有一点额外的空间。我不希望图像正对着边缘。

我的 javascript 代码：

//random position of each Card, 

$(document).ready(function(){

$('img').each(function() {

var top = (Math.random() * 200) 
var left = (Math.random() * 200) 

$(this).css({'top' : top + 'vh'})
$(this).css({'left' : left + 'vw'})

 $(this).css({'margin' : 10 + '%'})

});

});

Answer 1

您示例中的图像位置必须处于相对/绝对/固定状态（因为您使用的是顶部/左侧）。

在这个位置，边距没有推动元素或它周围的元素的效果。

解决方法是使用容器，改变img容器上的常数（200），调整窗口比例。

所以，容器会得到 img 宽度 + Xpx（X 是常数）并将图像定位在容器内。

我为您的应用中的解决方案提供了一个很好的方向/想法。