Hello, I'm just starting with Jetpack compose and I'm having a problem with image scaling ```@Compos...

# compose

[Akram]

Hello, I'm just starting with Jetpack compose and I'm having a problem with image scaling

@Composable
fun TravelPlaceCard(place:Place ,  modifier: Modifier = Modifier.None){
    Column (modifier = modifier.preferredWidthIn(maxWidth = 150.dp)){
        val imageModifier = Modifier.preferredHeight(180.dp).preferredWidth(150.dp).clip(RoundedCornerShape(4.dp))
        Image(asset = place.image , modifier = imageModifier , scaleFit = ScaleFit.FillWidth)
        Spacer(modifier = Modifier.preferredHeight(3.dp))
        val emphasisLevels = EmphasisAmbient.current
        ProvideEmphasis(emphasis = emphasisLevels.high) {
            Text(text = place.name , style = MaterialTheme.typography.subtitle1 , modifier = Modifier.fillMaxWidth(), maxLines = 2 )
        }
        ProvideEmphasis(emphasis = emphasisLevels.medium) {
            Text(text = place.location , style = MaterialTheme.typography.subtitle2 )
        }
        
    }
}

here is the result

[Siyamed]

it looks like the mid image filled the width?

[Siyamed]

it is the mid image that has the problem, is it correct?

[Akram]

yeah i have tried the

ScaleFit.FillHeight

but the other images will have a bad width

[Leland Richardson [G]]

cc @Nader Jawad

[Siyamed]

looking at the ratios of the images they dont look like fill height or fill width

[Siyamed]

i didnt use it before but it sounds like FillMinDimension

[Nader Jawad]

Yes we fixed this issue with ScaleFit.FillMaxDimension in a newer release

[Nader Jawad]

It should go out with the next drop

[Siyamed]

oohh 🙂 didnt know FillMin/MaxDimension is new

[Nader Jawad]

Actually it's technically not new, just fixed in a new release :-)

[Nader Jawad]

As a workaround you can create your own ScaleFit instance and take the maximum of the result between ScaleFit.FillWidth and ScaleFit.FillHeight

[Nader Jawad]

val Crop = object: ScaleFit {
    override fun scale(srcSize: PxSize, dstSize: PxSize): Float {
        return max(
            ScaleFit.FillWidth.scale(srcSize, dstSize)
            ScaleFit.FillHeight.scale(srcSize, dstSize),
        )
    }
}

[Akram]

Thank you @Nader Jawad that worked for me

[Nader Jawad]

Excellent, glad to hear it. You hopefully shouldn't need that work around in a future release