Why setting fillmaxwidth() to a Image doesn't make...

# compose

[Pablo]

Why setting fillmaxwidth() to a Image doesn't make the image to really fill all the available width? instead of that, fills more or less 50%. Why? I can see two yellow spaces on right and left of the image

Column(horizontalAlignment = Alignment.Start) {
    Image(modifier = Modifier.fillMaxWidth().background(Color.Yellow),
        painter = painterResource(imageResource),
        contentDescription = null)
}

[Pablo]

image.png

[Chrimaeon]

Because the modifier is applied to the container and not the painter.
Use the contentScale parameter to adjust how the painter filles the container.

[Pablo]

but documentation says that contentscale.crop cuts the image in some circunstances

[Pablo]

and seems to be the only contentscale that makes the entire image to appear without yellow parts on the sides

[Pablo]

I'll try with FillWidth but doesn't seems to be clear, I mean, supposedly fillmaxwidth should to the job

[Chrimaeon]

As I said, fillmacwidth is a modifier for the container . It does not influence how the actual image is rendered.

[Pablo]

understood

[Pablo]

maybe that is explained in the docs, I'll try find it

[Pablo]

thank you

[Chrimaeon]

Think of a Text composable. Applying the fillmaxwidth modifier will not stretch the text to fill the available space.

[Pablo]

oh, that is a great example

[Pablo]

great

[Owen]

You would require a vector graphics image not a png, or jpeg image., to enable manipulating your image size. Vector graphics files are in the form of an xml file. The other drawback with png and jpg files is, you have to have various sizes of the image in specific drawable dpi folders. If you want to convert a png, or jpg file to vgs format, there are several tools (Inkskape is one example) that you can download. Vector graphics images automatically resize according to the phone size and density, and will respond to modifier fillMaxWidth