如何更改 MUI 卡中的圖像大小

Question

import {
  Card,
  CardActionArea,
  CardContent,
  CardMedia,
  Typography,
} from "@mui/material";
import React from "react";
import { styled } from "@mui/material/styles";

const CardImage = styled("div")(({ theme }) => ({
  marginRight: theme.spacing(1),
  height: 250,
}));

function Post() {
  return (
    <Card>
      <CardActionArea>
        <CardImage>
          <CardMedia
            image="https://images.pexels.com/photos/12977998/pexels-photo-12977998.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
            title="My Post"
            //   sx={{ height: 250 }}
          />
        </CardImage>
        <CardContent>
          <Typography variant="h5">My First Post</Typography>
          <Typography variant="body">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
            eaque ducimus maxime expedita, blanditiis explicabo recusandae
            nostrum provident sed accusantium ut repellendus dolore voluptatum
            consequuntur harum. Exercitationem porro provident nulla?
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

export default Post;

這是這個代碼的output。

我需要更改此卡上的圖像尺寸。 為此，我創建了 CardImage。 但問題是我輸入的高度不會影響圖像大小。 那么我該如何解決這個問題

Answer 1

嘗試將CardMedia替換為：

<CardMedia
component='img'
image="https://images.pexels.com/photos/12977998/pexels-photo-12977998.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
title="My Post"
sx={{ height: 250 }}
/>

Answer 2

<CardMedia
component="img"
height="250"
src={imgSource}
alt="alt_text"
/>