MUI CSS: How to control image?-CodePudding

I have a MUI React Component with a Card wrapping img and buttons

                <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]">
              <img src={meme.url} className="center bg-cover" alt="" />
              <Box className="h-[72px] flex items-center justify-between px-4">
                <Stack spacing={2} direction="row">
                  <Button startIcon={<ThumbUpIcon />}>{meme.likes}</Button>
                  <Button startIcon={<VisibilityIcon />}>{meme.views}</Button>
                </Stack>
                <Button className="btn colorBtn">Remix</Button>
              </Box>
            </Card>

The Image is covering the card like Image card

How can I control the image so that it doesnt overflow the card? How can I achieve consistency with image size relative to the card? or just in general?

CodePudding user response：

Because bottom Box have 72px height, so image height should be calc(100% - 72px), you also need set w-full object-cover to image

<Card
    key={index}
    className="max-h-[450px] w-[310px] xl:w-[350px]"
>
    <img
        style={{ height: `calc(100% - 72px)` }}
        src={meme.url}
        className="center w-full bg-cover object-cover"
        alt=""
    />
    <Box className="flex h-[72px] items-center justify-between px-4">
        <Stack spacing={2} direction="row">
            <Button startIcon={<ThumbUpIcon />}>
                {meme.likes}
            </Button>
            <Button startIcon={<VisibilityIcon />}>
                {meme.views}
            </Button>
        </Stack>
        <Button className="btn colorBtn">Remix</Button>
    </Box>
</Card>

CodePudding user response：

Try using the object-fit css property for your img element:

<img
  src={meme.url}
  className="center 
  bg-cover"
  alt=""
  sx={{ objectFit: "contain" }}
/>;