Android Jetpack Compose - Image can't scale to box's width and Height

Issue

Created ImageCard view for creating the list in android jetpack compose but some images can't scratch to Box widget's width and height.

Using 640*427 image and output like image 1.
Using 6720*4480 image and it's looking good like image 2.

Use below code to create ImageCard.

Usage of ImageCard function: Call ImageCardData function in setContent{} function

@Composable
fun ImageCard(
    painter: Painter,
    title: String,
    contentDescription: String,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(10.dp),
        elevation = 5.dp
    ) {
        Box(
            modifier = Modifier.height(200.dp)
        ) {
            Image(
                painter = painter,
                contentDescription = contentDescription,
                contentScale = ContentScale.Crop
            )
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(
                        brush = Brush.verticalGradient(
                            colors = listOf(
                                Color.Transparent,
                                Color.Black
                            ),
                            startY = 50f
                        )
                    )
            )
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(12.dp),
                contentAlignment = Alignment.BottomStart
            ) {
                Text(
                    text = title,
                    style = TextStyle(color = Color.White, fontSize = 16.sp)
                )
            }
        }
    }
}

@Composable
fun ImageCardData() {
    val painter = painterResource(id = R.drawable.engagement)
    val title = "Sample Text Title"
    val description = "This is sample Image Description"
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        ImageCard(
            painter = painter,
            title = title,
            contentDescription = description
        )
    }
}

Solution

Your image view size gets calculated by it content, because it doesn't have any size modifiers.

Add fillMaxSize to the image:

Image(
    painter = painter,
    contentDescription = contentDescription,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxSize()
)

Answered By - Phil Dukhov