Set modifier height width to coil Image or AsyncImage and scal the image loaded from url

Question

I'm using coil library to load images in my composable view and I want to define fix height and width for my coil Image composable, however the modifier is missing in the coil Image composable class, following is the code snippet I'm using.

AsyncImage(
        model = limit.imgUrl,
        contentDescription = null
    )

How I can make the width and height fixed irrespective of the image resolution.

Every `AsyncImage` function in coil library has `Modifier` param. https://github.com/coil-kt/coil/blob/main/coil-compose-base/src/main/java/coil/compose/AsyncImage.kt — Thracian, Aug 24 '22 at 12:27

score 3 · Accepted Answer · answered Aug 24 '22 at 12:31

3

Just apply modifier = Modifier.height(xx.dp).width(xx.dp) to the AsyncImage:

   AsyncImage(
        //...
        modifier = Modifier.height(300.dp).width(100.dp)
    )

answered Aug 24 '22 at 12:31

Gabriele Mariotti

320,139
94
887
841

score 1 · Answer 2 · answered Jan 09 '23 at 19:14

Use the Modifier to set the width and height, but be sure to set contentScale = ContentScale.FillBounds, or it won't resize the image properly:

AsyncImage(
   model = limit.imgUrl,
   contentDescription = null,
   contentScale = ContentScale.FillBounds,
   modifier = Modifier.height(60.dp).width(80.dp)
)

Set modifier height width to coil Image or AsyncImage and scal the image loaded from url

2 Answers2