Question

I am doing little work for my website and I would like to auto-resize my images.. But not only auto-resize, but keep them proportional, even if I resize their width or height. I want to add additional white borders to compensate for new space.

I have never done any image work in the past, how should I approach this?

Answer 1

Calculate the height as if the width would fit, then check that against the height of the container. If it’s higher, then calculate the width to make the height fit:

newHeight = oldHeight * containerWidth / oldWidth;
if (newHeight <= containerHeight) {
  newWidth = containerWidth;
} else {
  newWidth = oldWidth * containerHeight / oldHeight;
  newHeight = containerHeight;
}

Now you can calculate where to place the image to center it:

x = (containerWidth - newWidth) / 2;
y = (containerHeight - newHeight) / 2;