ContentScale และการครอบตัด

Your image has its own aspect ratio, but your layout slot has another. ContentScale decides how the picture fits into that space.

Force a wide photo into a square and it can stretch or squash. ContentScale gives you sane rules so pictures never look distorted by accident.

The most common choice is ContentScale.Crop. It fills the whole slot and trims any overflow, so the frame is always full with no gaps.

ContentScale.Fit shrinks the image until it all fits inside the slot. Nothing is cut off, but you may see empty space on two sides.

ContentScale.FillBounds stretches the image to fill both dimensions exactly. It guarantees no gaps but will warp the aspect ratio.

Need to fill just one axis? FillWidth and FillHeight scale to match that single dimension while keeping the ratio.

Inside only shrinks when too big and never enlarges, while None draws at original size, cropping if it overflows.

Crop only has an effect when the Image has fixed bounds. Give it a size or fillMaxWidth with a height, or there is nothing to crop into.

When Fit leaves empty space, the alignment argument decides where the image sits, such as Center or TopStart.

Thumbnails and avatars almost always use Crop. It guarantees a clean, gap-free tile no matter the source photo dimensions.

Choose by what matters: use Fit when the whole image must be visible, and Crop when a full, edge-to-edge frame matters more.

You want an avatar tile that is always completely filled with no empty space. Which ContentScale fits best?

You can now choose ContentScale wisely: Crop to fill, Fit to show all, and align the result. Next: clipping into shapes! 🔲