Quiero que mis imágenes se ajusten completamente a CardMedia. Sin embargo, dado que son de diferentes alturas y anchos, algunos de ellos se cortan así:

Además, al cambiar el tamaño, algunas imágenes también se cortan:

Este es el código para la parte de CardMedia:

 <Card raised sx={{ maxWidth: 280, margin: "0 auto", padding: "0.1em", }} > <CardMedia component="img" height="250" image={product.img_urls[0]} alt={product.name} title={product.name} sx={{ padding: "1em 1em 0 1em" }} /> // Other Content </Card>

En general, quiero lograr algo como esto pero con todas las tarjetas del mismo alto y ancho:

¿Hay alguna forma de solucionar esto o necesito cambiar el tamaño de cada imagen individualmente?