Я хочу, чтобы случайным образом разместить изображение в границах родительского div

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

Так как 300px (ширина изображений) составляет 43% от 700 (ширина div, в котором появляются изображения) вам нужно ограничить 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';

Answer 2

в 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: ошибки в коде