let's seek the simplest solution

mui · Aug 15, 2018 · 04bf6a6 · 04bf6a6
1 parent 386b290
commit 04bf6a6
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 33 deletions.
diff --git a/docs/src/pages/demos/cards/ImgMediaCard.js b/docs/src/pages/demos/cards/ImgMediaCard.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+
+const styles = {
+  card: {
+    maxWidth: 345,
+  },
+  media: {
+    // ⚠️ object-fit is not supported by IE11.
+    objectFit: 'cover',
+  },
+};
+
+function ImgMediaCard(props) {
+  const { classes } = props;
+  return (
+    <div>
+      <Card className={classes.card}>
+        <CardMedia
+          component="img"
+          className={classes.media}
+          height="140"
+          image="/static/images/cards/contemplative-reptile.jpg"
+          title="Contemplative Reptile"
+        />
+        <CardContent>
+          <Typography gutterBottom variant="headline" component="h2">
+            Lizard
+          </Typography>
+          <Typography component="p">
+            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
+            across all continents except Antarctica
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button size="small" color="primary">
+            Share
+          </Button>
+          <Button size="small" color="primary">
+            Learn More
+          </Button>
+        </CardActions>
+      </Card>
+    </div>
+  );
+}
+
+ImgMediaCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ImgMediaCard);
diff --git a/.../src/pages/demos/cards/SimpleMediaCard.js → docs/src/pages/demos/cards/MediaCard.js b/.../src/pages/demos/cards/SimpleMediaCard.js → docs/src/pages/demos/cards/MediaCard.js
@@ -13,19 +13,17 @@ const styles = {
     maxWidth: 345,
   },
   media: {
-    height: 0,
-    paddingTop: '56.25%', // 16:9
+    height: 140,
   },
 };
 
-function SimpleMediaCard(props) {
+function MediaCard(props) {
   const { classes } = props;
   return (
     <div>
       <Card className={classes.card}>
         <CardMedia
           className={classes.media}
-          component="img"
           image="/static/images/cards/contemplative-reptile.jpg"
           title="Contemplative Reptile"
         />
@@ -51,8 +49,8 @@ function SimpleMediaCard(props) {
   );
 }
 
-SimpleMediaCard.propTypes = {
+MediaCard.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(SimpleMediaCard);
+export default withStyles(styles)(MediaCard);
diff --git a/docs/src/pages/demos/cards/cards.md b/docs/src/pages/demos/cards/cards.md
@@ -21,7 +21,11 @@ Although cards can support multiple actions, UI controls, and an overflow menu,
 
 Example of a card using an image to reinforce the content.
 
-{{"demo": "pages/demos/cards/SimpleMediaCard.js"}}
+{{"demo": "pages/demos/cards/MediaCard.js"}}
+
+By default, we use the combination of a `<div>` element and a *background image* to display the media. It can be problematic in some situations. For instance, you might want to display a video or a responsive image. Use the `component` property for these use cases:
+
+{{"demo": "pages/demos/cards/ImgMediaCard.js"}}
 
 ## UI Controls
 

diff --git a/packages/material-ui/src/CardMedia/CardMedia.js b/packages/material-ui/src/CardMedia/CardMedia.js
@@ -16,21 +16,6 @@ export const styles = {
   media: {
     width: '100%',
   },
-  imageContainer: {
-    position: 'relative',
-    overflow: 'hidden',
-    width: '100%',
-  },
-  image: {
-    position: 'absolute',
-    top: -9999,
-    right: -9999,
-    bottom: -9999,
-    left: -9999,
-    margin: 'auto',
-    minWidth: '100%',
-    minHeight: '100%',
-  },
 };
 
 const MEDIA_COMPONENTS = ['video', 'audio', 'picture', 'iframe', 'img'];
@@ -43,14 +28,6 @@ function CardMedia(props) {
     'Material-UI: either `image` or `src` property must be specified.',
   );
 
-  if (Component === 'img') {
-    return (
-      <div className={classNames(classes.imageContainer, className)}>
-        <Component className={classes.image} src={image || src} />
-      </div>
-    );
-  }
-
   const isMediaComponent = MEDIA_COMPONENTS.indexOf(Component) !== -1;
   const composedStyle =
     !isMediaComponent && image ? { backgroundImage: `url("${image}")`, ...style } : style;

diff --git a/pages/demos/cards.js b/pages/demos/cards.js
@@ -15,11 +15,18 @@ module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/cards/SimpleCard'), 'utf8')
 `,
         },
-        'pages/demos/cards/SimpleMediaCard.js': {
-          js: require('docs/src/pages/demos/cards/SimpleMediaCard').default,
+        'pages/demos/cards/MediaCard.js': {
+          js: require('docs/src/pages/demos/cards/MediaCard').default,
           raw: preval`
 module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/demos/cards/SimpleMediaCard'), 'utf8')
+  .readFileSync(require.resolve('docs/src/pages/demos/cards/MediaCard'), 'utf8')
+`,
+        },
+        'pages/demos/cards/ImgMediaCard.js': {
+          js: require('docs/src/pages/demos/cards/ImgMediaCard').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/cards/ImgMediaCard'), 'utf8')
 `,
         },
         'pages/demos/cards/MediaControlCard.js': {