ContentScale und Zuschneiden
Passen Sie Bilder sauber ein, füllen Sie Bereiche aus und schneiden Sie sie zu.
ContentScale und Zuschneiden ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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! 🔲
Häufig gestellte Fragen
Ist die Lektion „ContentScale und Zuschneiden“ kostenlos?
Ja — der vollständige Text von „ContentScale und Zuschneiden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „ContentScale und Zuschneiden“?
Passen Sie Bilder sauber ein, füllen Sie Bereiche aus und schneiden Sie sie zu. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „ContentScale und Zuschneiden“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Die Image-Composable
- Material Icons mit Icon
- ContentScale und Zuschneiden
- Bilder zuschneiden und formen