Organizational Research By

Surprising Reserch Topic

Experts Most Trusted Topic


how to resize images proportionally keeping the aspect ratio


how to resize images proportionally keeping the aspect ratio  using -'javascript,jquery,image,resize'

I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio.

Can someone point me to some code, or explain the logic?
    

asked Oct 19, 2015 by deepak07.s
0 votes
5 views



Related Hot Questions



Government Jobs Opening

answered Oct 19, 2015 by kinnari
0 votes
           $('#productThumb img').each(function() {
        var maxWidth = 140; // Max width for the image
        var maxHeight = 140;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = $(this).width();    // Current image width
        var height = $(this).height();  // Current image height
        // Check if the current width is larger than the max
        if(width > height){
            height = ( height / width ) * maxHeight;

        } else if(height > width){
            maxWidth = (width/height)* maxWidth;
        }
        $(this).css("width", maxWidth); // Set new width
        $(this).css("height", maxHeight);  // Scale height based on ratio
    });
answered Oct 19, 2015 by kotmus2002
0 votes

There are 4 parameters to this problem

  1. current image width iX
  2. current image height iY
  3. target viewport width cX
  4. target viewport height cY

And there are 3 different conditional parameters

  1. cX > cY ?
  2. iX > cX ?
  3. iY > cY ?

solution

  1. Find the smaller side of the target view port F
  2. Find the larger side of the current view port L
  3. Find the factor of both F/L = factor
  4. Multiply both sides of the current port with the factor ie, fX = iX * factor; fY = iY * factor

that's all you need to do.

//Pseudo code


iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height

1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk

2. lE = iX > iY ? iX: iY; //long edge

3. if ( cX < cY )
   then
4.      factor = cX/lE;     
   else
5.      factor = cY/lE;

6. fX = iX * factor ; fY = iY * factor ; 

This is a mature forum, I am not giving you code for that :)

answered Oct 19, 2015 by patelnikul321
0 votes

After some trial and error I came to this solution:

function center(img) {
    var div = img.parentNode;
    var divW = parseInt(div.style.width);
    var divH = parseInt(div.style.height);
    var srcW = img.width;
    var srcH = img.height;
    var ratio = Math.min(divW/srcW, divH/srcH);
    var newW = img.width * ratio;
    var newH = img.height * ratio;
    img.style.width  = newW + "px";
    img.style.height = newH + "px";
    img.style.marginTop = (divH-newH)/2 + "px";
    img.style.marginLeft = (divW-newW)/2 + "px";
}
answered Oct 19, 2015 by sujata naik
0 votes

Without additional temp-vars or brackets.

    var width= $(this).width(), height= $(this).height()
      , maxWidth=100, maxHeight= 100;

    if(width > maxWidth){
      height = Math.floor( maxWidth * height / width );
      width = maxWidth
      }
    if(height > maxHeight){
      width = Math.floor( maxHeight * width / height );
      height = maxHeight;
      }

Keep in Mind: Search engines don't like it, if width and height attribute does not fit the image, but they don't know JS.

answered Oct 19, 2015 by vimaldas2005
0 votes

In order to determine the aspect ratio, you need to have a ratio to aim for.

Height

function getHeight(length, ratio) {
  var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
  return Math.round(height);
}

Width

function getWidth(length, ratio) {
  var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1))));
  return Math.round(width);
}

In this example I use 16:10 since this the typical monitor aspect ratio.

var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);

console.log(height);
console.log(width);

Results from above would be 147 and 300

answered Oct 19, 2015 by rajesh
0 votes

This should work for images with all possible proportions

$(document).ready(function() {
    $('.list img').each(function() {
        var maxWidth = 100;
        var maxHeight = 100;
        var width = $(this).width();
        var height = $(this).height();
        var ratioW = maxWidth / width;  // Width ratio
        var ratioH = maxHeight / height;  // Height ratio

        // If height ratio is bigger then we need to scale height
        if(ratioH > ratioW){
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratioW);  // Scale height according to width ratio
        }
        else{ // otherwise we scale width
            $(this).css("height", maxHeight);
            $(this).css("width", height * ratioH);  // according to height ratio
        }
    });
});
answered Oct 19, 2015 by sujata naik
0 votes

This totally worked for me for a draggable item - aspectRatio:true

.appendTo(divwrapper).resizable({
    aspectRatio: true,
    handles: 'se',
    stop: resizestop 
})
answered Oct 19, 2015 by manju bhargava

...