Resize SMALLEST image dimension [duplicate]

Question

This seems like something that would've been asked before but I can't find the duplicate so...

I want the smallest dimension of an image to be scaled max 200 while keeping aspect ratio. So:

A 600x400 image has smallest dimension 400, which should be 200 so scale by 0.5: new image will be 300x200
Similarly 400x800 will be 200x400
The smallest dimension for 100x300 is already < 200 so it will remain 100x300.

Obviously if it can be done with css then that is preferred over javascript.

Those aren't duplicates, they make the LARGEST dimension 200... — Mark
– Mark, Commented Mar 17, 2014 at 19:49
Have you tried anything? Also, I don't think this can be done with pure css.. probably you should write some JS to test for the largest dimension and then set width/height accordingly. The other dimension should be set to auto so the image remains proportions — donnywals
– donnywals, Commented Mar 17, 2014 at 19:53
@George Stocker: how would that work? I can make the largest dimension 200 by fitting it inside a 200x200 box. What box would I pick to make the smallest dimension 200? (I'm only asking this to show why it's not possible). — Mark
– Mark, Commented Mar 20, 2014 at 15:55

Roko C. Buljan · Accepted Answer · 2014-03-17 21:09:40Z

3

Yep, you'll need JS:

LIVE DEMO

function scale(W, H, max) {
  var min = Math.min(W, H),        // Get the smallest size
      nr  = min>max,               // NeededResize (Boolean)
      rat = Math.min(max/W, max/H);// Ratio
  return {
    W: nr?W*rat:W, // if NeededResize do W*rat, else just use the image W
    H: nr?H*rat:H
  };
}

// Use like: scale(imageWidth, imageHeight, maxSizeToRespect);
var resize = scale(this.width, this.height, 200);
// Where from now on
resize.W // is the returned width scale
resize.H // is the returned height scale

edited Mar 17, 2014 at 21:09

answered Mar 17, 2014 at 20:04

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Resize SMALLEST image dimension [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related