diff --git a/docs/data/material/components/cards/ImgMediaCard.js b/docs/data/material/components/cards/ImgMediaCard.js
index 885f0689e09387..447b8797e99e05 100644
--- a/docs/data/material/components/cards/ImgMediaCard.js
+++ b/docs/data/material/components/cards/ImgMediaCard.js
@@ -11,9 +11,10 @@ export default function ImgMediaCard() {
     <Card sx={{ maxWidth: 345 }}>
       <CardMedia
         component="img"
-        alt="green iguana"
-        height="140"
+        alt="Green iguana"
         image="/static/images/cards/contemplative-reptile.jpg"
+        sx={{ width: '100%', height: 'auto', aspectRatio: '16 / 9' }}
+        loading="lazy"
       />
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">
diff --git a/docs/data/material/components/cards/ImgMediaCard.tsx b/docs/data/material/components/cards/ImgMediaCard.tsx
index 885f0689e09387..447b8797e99e05 100644
--- a/docs/data/material/components/cards/ImgMediaCard.tsx
+++ b/docs/data/material/components/cards/ImgMediaCard.tsx
@@ -11,9 +11,10 @@ export default function ImgMediaCard() {
     <Card sx={{ maxWidth: 345 }}>
       <CardMedia
         component="img"
-        alt="green iguana"
-        height="140"
+        alt="Green iguana"
         image="/static/images/cards/contemplative-reptile.jpg"
+        sx={{ width: '100%', height: 'auto', aspectRatio: '16 / 9' }}
+        loading="lazy"
       />
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">
diff --git a/docs/data/material/components/cards/MediaCard.js b/docs/data/material/components/cards/MediaCard.js
index e12dd6c08077ce..a57be1318619be 100644
--- a/docs/data/material/components/cards/MediaCard.js
+++ b/docs/data/material/components/cards/MediaCard.js
@@ -10,9 +10,11 @@ export default function MediaCard() {
   return (
     <Card sx={{ maxWidth: 345 }}>
       <CardMedia
-        sx={{ height: 140 }}
+        component="img"
+        sx={{ width: '100%', height: 'auto', aspectRatio: '16 / 9' }}
         image="/static/images/cards/contemplative-reptile.jpg"
-        title="green iguana"
+        alt="Green iguana"
+        loading="lazy"
       />
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">
diff --git a/docs/data/material/components/cards/MediaCard.tsx b/docs/data/material/components/cards/MediaCard.tsx
index e12dd6c08077ce..a57be1318619be 100644
--- a/docs/data/material/components/cards/MediaCard.tsx
+++ b/docs/data/material/components/cards/MediaCard.tsx
@@ -10,9 +10,11 @@ export default function MediaCard() {
   return (
     <Card sx={{ maxWidth: 345 }}>
       <CardMedia
-        sx={{ height: 140 }}
+        component="img"
+        sx={{ width: '100%', height: 'auto', aspectRatio: '16 / 9' }}
         image="/static/images/cards/contemplative-reptile.jpg"
-        title="green iguana"
+        alt="Green iguana"
+        loading="lazy"
       />
       <CardContent>
         <Typography gutterBottom variant="h5" component="div">