Aspect Ratio Converter

When forcing an image into a new aspect ratio (e.g., forcing a vertical 9:16 phone photo into a horizontal 16:9 TV frame), you have two mathematical choices: lose content or gain empty space. This is governed by the principles of CSS object-fit.

To "cover" the new ratio without squishing or stretching the image, the algorithm calculates two scale factors: WidthScale and HeightScale, and takes the maximum of the two.

This ensures the new canvas is completely filled edge-to-edge. However, the overflow—the parts of the image that stick out of the new bounding box—is permanently clipped off.

Conversely, to "contain" the image, the algorithm takes the minimum of the two scale factors.

This ensures the entire original image fits inside the new bounds without any clipping. However, because the ratios don't match, this creates "letterboxing" or "pillarboxing"—empty padding on the sides or top/bottom that must be filled with a solid color, blur, or transparency.

Unlike basic CSS resizing, this tool performs the crop or pad operation directly on the raw image pixel data using the HTML5 Canvas API. This allows it to output a new, fully self-contained file at the highest possible resolution, processing everything offline in milliseconds.