diff --git a/docs/pages/api/card-media.md b/docs/pages/api/card-media.md
index 00737a879ed9ba..b50e940417a41c 100644
--- a/docs/pages/api/card-media.md
+++ b/docs/pages/api/card-media.md
@@ -43,6 +43,7 @@ Any other props supplied will be provided to the root element (native element).
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">MuiCardMedia-root</span> | Styles applied to the root element.
 | <span class="prop-name">media</span> | <span class="prop-name">MuiCardMedia-media</span> | Styles applied to the root element if `component="video, audio, picture, iframe, or img"`.
+| <span class="prop-name">img</span> | <span class="prop-name">MuiCardMedia-img</span> | Styles applied to the root element if `component="picture or img"`.
 
 You can override the style of the component thanks to one of these customization points:
 
diff --git a/packages/material-ui/src/CardMedia/CardMedia.js b/packages/material-ui/src/CardMedia/CardMedia.js
index 2fdb7a293dc412..6f830760780bc1 100644
--- a/packages/material-ui/src/CardMedia/CardMedia.js
+++ b/packages/material-ui/src/CardMedia/CardMedia.js
@@ -14,6 +14,9 @@ export const styles = {
   /* Styles applied to the root element if `component="video, audio, picture, iframe, or img"`. */
   media: {
     width: '100%',
+  },
+  /* Styles applied to the root element if `component="picture or img"`. */
+  img: {
     // ⚠️ object-fit is not supported by IE 11.
     objectFit: 'cover',
   },
@@ -49,6 +52,7 @@ const CardMedia = React.forwardRef(function CardMedia(props, ref) {
         classes.root,
         {
           [classes.media]: isMediaComponent,
+          [classes.img]: ['picture', 'img'].indexOf(Component) !== -1,
         },
         className,
       )}