Question

我有一些代码，显示一个或两个随机图像组成一个列表，并将其放在div中的随机位置。有时图像显示在div之外。如何包含仅在父div的边界中显示的图像？

当前代码：

$('.draggable').each(function(i, el) {
  var tLeft = Math.floor(Math.random() * 99) + 1 + '%',
    tTop = Math.floor(Math.random() * 99) + 1 + '%';
  $(el).css({
    'left': tLeft,
    'top': tTop
  });
});

.draggable {
  position: absolute;
}

.top-images {
  position: relative;
  width: 700px;
  height: 80vh;
  margin: 0 auto;
}

.top-images img {
  width: 300px;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-images">
  <img class="draggable" src="http://serwer1858479.home.pl/autoinstalator/wordpress/wp-content/themes/cincio/img/main/main_page(9).jpg">
  <img class="draggable" src="http://serwer1858479.home.pl/autoinstalator/wordpress/wp-content/themes/cincio/img/main/main_page(3).jpg">
</div>

Answer 1

在js中获取每个图像的宽度和高度... 获取父级的宽度和高度。将图片随机放置在0,0到（parent_width-img_width + 1），（parent_height-img_height + 1）

之间

注意：js的新手，因此确切的代码可能略有不同，但是一般概念是准确的

将其替换为数学函数

var tLeft = Math.floor(Math.random() * ($(el).parent().width()-$(el).clientwidth+1)) + 'px',
    tTop  = Math.floor(Math.random() * ($(el).parent().height()-$(el).clientheight+1)) + 'px';

如果大小是自动的，可能会弄乱值

编辑1：代码中的错误

Answer 2

由于300像素（图片的宽度）是700（图片所显示的div的宽度）的43％您需要将tleft限制为57（100-43）。但是tTop有点不同，因为您使用了像素。试试这个：

var maxTop = $('.top-images').first().height() - $(this).height(),
tLeft = Math.floor(Math.random() * 57) + 1 + '%',
tTop = Math.floor(Math.random() * maxTop) + 'px';

我想将图像随机放置在父div的边界中

2 个答案: