function scaleimage(img){

​

    img.style.height = 'auto';

    img.style.width = 'auto';

​

   //Getting the image hight and width

    var imgW = img.clientWidth;

    var imgH = img.clientHeight;

​

   //Getting the mask hight and width

    var maskH = 400;

    var maskW = 600;

​

    var scaleH = maskH / imgH;

    var scaleW = maskW / imgW;

​

   // Scaling

    if (scaleH < scaleW) {

        img.style.height = maskH + "px";

        var newW = Math.round(imgW * scaleH);

        img.style.width = newW + "px";

      img.style.left = Math.round((maskW - newW) / 2) + "px";

    } else {

        img.style.width = maskW + "px";

      var newH = Math.round(imgH * scaleW);

        img.style.height = newH + "px";

      img.style.top = Math.round((maskH - newH) / 2) + 'px';

}

​

​

}

​

$(document).ready(function(){

  $('#mask').width(600).height(400);

  scaleimage($('#mask img')[0]);

});