ContentScale & Cropping
Fit, fill, and crop images cleanly.
ContentScale & Cropping is a free Jetpack Compose Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
When Image and Box Disagree
Your image has its own aspect ratio, but your layout slot has another. ContentScale decides how the picture fits into that space.
The Aspect Ratio Problem
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.
Crop Fills and Trims
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.
Image(painter = p, contentDescription = null,
contentScale = ContentScale.Crop)Fit Shows Everything
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.
FillBounds Can Distort
ContentScale.FillBounds stretches the image to fill both dimensions exactly. It guarantees no gaps but will warp the aspect ratio.
Width or Height Only
Need to fill just one axis? FillWidth and FillHeight scale to match that single dimension while keeping the ratio.
Inside Crops, None Does Not
Inside only shrinks when too big and never enlarges, while None draws at original size, cropping if it overflows.
Crop Needs a Bounded Size
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.
Image(painter = p, contentDescription = null,
modifier = Modifier.size(120.dp), contentScale = ContentScale.Crop)Align Within the Frame
When Fit leaves empty space, the alignment argument decides where the image sits, such as Center or TopStart.
Image(painter = p, contentDescription = null, alignment = Alignment.TopCenter)Crop for Thumbnails
Thumbnails and avatars almost always use Crop. It guarantees a clean, gap-free tile no matter the source photo dimensions.
Pick by Intent
Choose by what matters: use Fit when the whole image must be visible, and Crop when a full, edge-to-edge frame matters more.
Quick Check
You want an avatar tile that is always completely filled with no empty space. Which ContentScale fits best?
Recap: Scaling Images
You can now choose ContentScale wisely: Crop to fill, Fit to show all, and align the result. Next: clipping into shapes! 🔲
Frequently asked questions
Is the “ContentScale & Cropping” lesson free?
Yes — the full text of “ContentScale & Cropping” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “ContentScale & Cropping”?
Fit, fill, and crop images cleanly. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “ContentScale & Cropping” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Image Composable
- Material Icons with Icon
- ContentScale & Cropping
- Clip & Shape Your Images