The resize formula

To resize proportionally: new_height = original_height × (new_width ÷ original_width). For example, to resize a 1920×1080 image to 1280px wide: 1080 × (1280 ÷ 1920) = 720. The result is 1280×720 — same 16:9 ratio, no stretching. To calculate from a target height instead: new_width = original_width × (new_height ÷ original_height).

// JavaScript — resize while preserving aspect ratio
function resizeKeepRatio(origW, origH, maxW, maxH) {
  const ratio = Math.min(maxW / origW, maxH / origH);
  return {
    width: Math.round(origW * ratio),
    height: Math.round(origH * ratio)
  };
}

// 4000×3000 photo → fit in 800×600
console.log(resizeKeepRatio(4000, 3000, 800, 600));
// { width: 800, height: 600 }

// 1920×1080 video → fit in 400×400
console.log(resizeKeepRatio(1920, 1080, 400, 400));
// { width: 400, height: 225 }

# Python
def resize_keep_ratio(w, h, max_w, max_h):
    ratio = min(max_w / w, max_h / h)
    return round(w * ratio), round(h * ratio)

CSS techniques for responsive images

Use width: 100% with height: auto on img elements for fluid scaling. The aspect-ratio CSS property reserves space before the image loads, preventing layout shift. For cropping to a specific ratio, use object-fit: cover on the img inside a container with a fixed aspect-ratio. For background images, use background-size: contain (show all) or background-size: cover (fill, may crop).

Common mistakes when resizing

Never set both width and height to fixed pixel values unless they match the original ratio — this causes stretching. Upscaling beyond the original resolution creates blurry images; prefer downscaling. When batch-resizing for thumbnails, always calculate one dimension from the other rather than using a fixed box size. Use the calculator above to find the correct dimensions for any target size.