# A visual guide to `ContentScale`

> A visual guide showcasing the effects of different ContentScale types used on an Image composable.

Published 3 August 2022 by Alex Styl.

[`Image`](<https://developer.android.com/reference/kotlin/androidx/compose/foundation/package-summary#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)>) accepts a [`ContentScale`](https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/ContentScale) parameter that will adjust the way the loaded image is displayed. This parameter is similar to [`ImageView`](https://developer.android.com/reference/android/widget/ImageView)'s [`ScaleType`](https://developer.android.com/reference/android/widget/ImageView.ScaleType).

This is a visual guide to help you choose which `ContentScale` you need along with the description from the official documentation.

> This article was featured in [Android Weekly #530](https://androidweekly.net/issues/issue-530) 🎉

## ContentScale: None

Do not apply any scaling to the source

![None](https://composables.com/blog-assets/static/images/None.png)

## ContentScale: Fill Bounds

Scale horizontal and vertically non-uniformly to fill the destination bounds.

![Fill Bounds](https://composables.com/blog-assets/static/images/fill_bounds.png)

## ContentScale: Fit

Scale the source uniformly (maintaining the source's aspect ratio) so that both dimensions (width and height) of the source will be equal to or less than the corresponding dimension of the destination
This ContentScale implementation in combination with usage of Alignment.Center provides similar behavior to [ImageView.ScaleType.FIT_CENTER](https://developer.android.com/reference/android/widget/ImageView.ScaleType#FIT_CENTER)

![Fit](https://composables.com/blog-assets/static/images/fit.png)

## ContentScale: FillHeight

Scale the source maintaining the aspect ratio so that the bounds match the destination height. This can cover a larger area than the destination if the height is larger than the width.

![FillHeight](https://composables.com/blog-assets/static/images/FillHeight.png)

## ContentScale: FillWidth

Scale the source maintaining the aspect ratio so that the bounds match the destination width. This can cover a larger area than the destination if the width is larger than the height.

![FillWidth](https://composables.com/blog-assets/static/images/FillWidth.png)

## ContentScale: Crop

Scale the source uniformly (maintaining the source's aspect ratio) so that both dimensions (width and height) of the source will be equal to or larger than the corresponding dimension of the destination.
This ContentScale implementation in combination with usage of Alignment.Center provides similar behavior to [ImageView.ScaleType.CENTER_CROP](https://developer.android.com/reference/android/widget/ImageView.ScaleType#CENTER_CROP)

![Crop](https://composables.com/blog-assets/static/images/crop.png)

## ContentScale: Inside

Scale the source to maintain the aspect ratio to be inside the destination bounds if the source is larger than the destination. If the source is smaller than or equal to the destination in both dimensions, this behaves similarly to None. This will always be contained within the bounds of the destination.

This ContentScale implementation in combination with usage of Alignment.Center provides similar behavior to [CENTER_INSIDE](https://developer.android.com/reference/android/widget/ImageView.ScaleType#CENTER_INSIDE)

![Inside](https://composables.com/blog-assets/static/images/Inside.png)

Those were all the different types of `ContentScale` you can use in your `Image`. Hope this guide will help you decide which one to pic without having to restart your app multiple times.

---

## Related Lessons

[How to style your Composables in Jetpack Compose](https://composables.com/lesson/styling.md)