Material UI 中卡片內的相同高度圖像

Question

我正在嘗試列出具有相同高度圖像的 Material UI 組件。 但是，有些圖像的高度較低（有些圖像的寬度太大）。

如何使它們的高度響應並且對所有卡片都相同？ 謝謝！

css

.card {
    max-width: 300px;
    height: 100%;
}

.card > button > img {
    height: auto;
}

.tsx 文件

import{ useContext} from "react";
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import Grid from '@material-ui/core/Grid';
import './Catalog.css';
import { MoviesContext } from "../../services/context";

const NavLink = require("react-router-dom").NavLink;

const MovieCards = () =>  {
  const { movies } = useContext(MoviesContext);  
  
  return (
    <div >
      <Grid container spacing={1}>
      {movies.map((movie) => (
        <Grid item xs={6} sm={2} key={movie.id}>
          <NavLink to={"movie/" + movie.id}>
            <Card className="card">
              <CardActionArea>
                <CardMedia
                  component="img"
                  alt={"Poster of " + movie.title}
                  className="BeerListItem-img"
                  image={movie.picture}
                  title={movie.title}
                />
              </CardActionArea>
              <CardActions>
                <Button size="small" color="primary">
                  <FavoriteBorderIcon />
                </Button>
                <Button size="small" color="primary">
                  {movie.rating}
                </Button>
              </CardActions>
            </Card>
          </NavLink>
        </Grid>
      ))}
      </Grid>
    </div>
  );
}

export default MovieCards;

Answer 1

給圖像一個固定的高度和寬度：

.card > button > .jss103{
    width: 100%;
    height: 500px;
}