KamelImage fills up max size

[zeroeightysix]

Rather counterintuitively, and annoyingly, KamelImage without a Modifier to restrict its size will consume all space it can get due to this default modifier:

Kamel/kamel-image/src/commonMain/kotlin/io/kamel/image/KamelImage.kt

Lines 45 to 54 in 291f157

	val onSuccess: @Composable (BoxScope.(Painter) -> Unit) = { painter ->
	Image(
	painter,
	contentDescription,
	Modifier.fillMaxSize(),
	alignment,
	contentScale,
	alpha,
	colorFilter
	)

This leads to it being the case that if you include any image in an unbounded box that the entire UI just becomes that image. For our usecase, we have a very wide banner image that is supposed to fill up the parent's entire width but not the height. This default prevents that from happening 🙁

Can't we make the inner Image have no modifier?

[luca992]

@zeroeightysix So that modifier will actually cause it to fill the size of KamelImageBox. and the modifier here lets you apply whatever modifiers you want to the box. Is that not working for you?

Also you can always make your own version of KamelImage using KamelImageBox if you need some non-standard behavior

[zeroeightysix]

@zeroeightysix So that modifier will actually cause it to fill the size of KamelImageBox. and the modifier here lets you apply whatever modifiers you want to the box. Is that not working for you?

Also you can always make your own version of KamelImage using KamelImageBox if you need some non-standard behavior

As the box sizes to fit its contents, it will grow larger than the image dimensions themselves.

You'd expect, without any modifiers, for the box to be the same size as the actual image, tightly wrapping around it. Instead, both the box and inner Image take up more space than is required to display the image; is that intentional?

[luca992]

Yeah I suppose it makes more sense to display an image in its actual size by default. I think it should just work that way if I removed that modifier... The only thing I'm worried about is that it may cause issues with contentScale. I'd have to check I think

[wuujcik]

I have the same issue. I'm loading image that can have basically any dimentions and I want the contentScale to adjust the size to hardcoded height of 50.dp, but the below code does not wrap the width of the image, but uses the whole width of the Row in which it is placed. In the same Row I need Spacer with weight (to take any space left) and some other items on the right, so I really need the width to be taken from scaling the content, which does not happen right now

KamelImage(
    resource = asyncPainterResource(logoUrl),
    modifier = Modifier
        .height(50.dp)
        .wrapContentWidth(),
    contentDescription = null,
    contentScale = ContentScale.FillHeight,
    alignment = Alignment.CenterStart

I was able to resove my issue by using custom KamelImageBox, but I find this default behaviour to be counter-intuitive.

[luca992]

If you want to make a proposal as a pr with your custom kamel image I can take a look and we can go from there @wuujcik

[JacobCube]

I'm facing the same issue. Whenever I want to have either of dimension off of the content itself, based on the ratio of height to width, the other dimension takes the whole space. For example, I know that I want to have GIF within a conversation chat to be at maximum 30 percent of height of the screen and I also want to leave the width be whatever based on the ratio. This in turn results in the width being maximum of the screen, yet the content is in the middle of it (meaning the size is larger than the actual content's size).
This simply shouldn't be hard-coded.
EDIT: I resolved it the same way wuujcik did, by creating my own implementation of KamelImage and replacing Modifier.fillMaxSize() with the modifier parameter.

[luca992]

Again, please make a pr if you want to propose to change the default behavior.

[JacobCube]

I will test the contentAlignment as you mentioned and will do.