Transloadit

What is a 1:1 Aspect Ratio?

A 1:1 aspect ratio defines a square frame whose width and height are equal. Changing either dimension without matching the other produces a different ratio or distorts the content.

How 1:1 Aspect Ratios work

Aspect ratio is a proportion, not a pixel count, so 300×300 and 2,000×2,000 frames are both 1:1. A source of any other shape reaches 1:1 in one of three ways. Cropping scales the image until it covers the square and cuts off the overflow. Padding scales the image to fit inside the square and fills the remaining bars with a background color, also called letterboxing. Stretching scales width and height independently and is the only method that changes subject proportions. A centered crop of a landscape source keeps a share of the width equal to height divided by width: 56.25% of a 16:9 frame and 75% of a 4:3 frame. Padding the same source keeps all of it, but the image fills only that share of the square, so the subject appears smaller. Method names vary between tools: CSS and sharp use cover, contain, and fill for crop, pad, and stretch, so fill there means stretch, while Transloadit names the same three fillcrop, pad, and stretch.

Key facts

  1. Does an equal pixel width and height always display as a square? Only when the pixels themselves are square. Video can carry a sample aspect ratio (SAR), and FFmpeg defines the display aspect ratio as width / height × SAR, so a 720×720 stream whose SAR is not 1:1 is meant to be shown non-square. Check the SAR, not just the frame size, before calling a video 1:1.
  2. What does a browser do with a non-square image in a square box? It depends on which box is square. When the img element itself is sized to a square, the image is stretched: the initial value of object-fit is fill, which distorts content whose ratio differs from the box; object-fit: cover crops and object-fit: contain letterboxes instead. A square parent alone does not stretch it: in normal inline layout, an img with automatic width and height uses the image’s intrinsic dimensions, so it keeps its shape and is not fitted to the parent. aspect-ratio: 1 shapes a box only when at least one of its dimensions is automatic. These properties control rendering and leave the image file unchanged.
  3. Which part of the image survives a square crop? By default, the center: sharp, for example, positions cover crops at centre. Its content-aware strategies, attention and entropy, score edge regions by luminance frequency, color saturation, and skin tones, or by Shannon entropy, and discard the lowest-scoring edges. These are heuristics, not subject detection, so review a sample of your own images before applying one to a whole catalog.
  4. What does padding add to the file? The bars become real pixels in a color you must choose, and tool defaults differ: sharp pads contain output with opaque black unless background is set. Transparent bars need an output format that supports transparency. JPEG does not, so a padded JPEG always carries opaque bars, and transparent areas already in a source such as a PNG logo cannot stay transparent either.

When 1:1 Aspect Ratios matter

Choose 1:1 output for avatars, product thumbnails, or square social posts. When the source is not square, decide whether to crop meaningful content or add padding around it.

How Transloadit helps with 1:1 Aspect Ratios

Transloadit’s /image/resize Robot returns a square when width and height are equal and resize_strategy is fillcrop (scale, then crop the overflow), pad (scale, then fill the remainder with background), or stretch (ignore the source ratio). The default strategy, fit, preserves the source ratio instead, so equal dimensions alone do not produce a square: the documented example resizes a 400×300 image into 100×75. With fillcrop, gravity selects the region to keep; it defaults to center and accepts the content-aware values attention and entropy. When the subject is a person, the /image/facedetect Robot can crop around detected faces.

The background defaults to white. It fills the padding, and by default the background of transparent images is changed to white too. The documentation says to set background to none to preserve transparency, which works only when the output format supports transparency, so not in a JPEG. The output keeps the input format unless format is set. Content-aware gravity is documented as needing libvips, the fillcrop strategy, and both width and height. Effects such as sepia or text, and inputs such as HEIC, can run through ImageMagick instead, which centers the crop and adds a warning to the Assembly.

Explore Transloadit’s image capabilities

Sources

Turn media knowledge into a working pipeline

Connect uploads, processing, AI, storage, and delivery through one declarative API — with the encoding stack, scaling, and format churn handled for you.

Try Transloadit for free