Нужно присвоить значение width и height класса .pond  переменным. После чего появление картинок будет происходить только в этой области
Вот наработка, но почему-то он не принимает значения pondWidth и pondHeight
$('.hide-all').click(function spawnStarting() {
    var DUCK1_COUNT = $(".count1").html();
//параметры пруда
    var $pond, pondWidth, pondHeight;
    $pond = $('.pond');
     pondWidth = $pond.width();
     pondHeight = $pond.height();
//Добавление пруда
    $("body").append("<div class='pond'>");
//Спаун уток
    for (var i = 0; i < DUCK1_COUNT; i++) {
        var DUCK = $("<img src='img/004-duck.png' class='utka plav'>").appendTo(".pond")
        .addClass('Krykvi1'+i);
        var transform = 'translate(' + getRandom(pondWidth)+ 'px, ' +  getRandom(pondHeight)  + 'px)'
         if (getRandomIn(3, 6) < 5) {
           transform += " scaleX(-1)"
        }
        DUCK.css('transform', transform);
  }
function getRandom(upper) {
  return Math.random() * upper;
}