Невозможно уменьшить размер изображения в Material UI CardMedia в компоненте React - PullRequest
Новая
       18

Невозможно уменьшить размер изображения в Material UI CardMedia в компоненте React

1 голос
/ 16 марта 2019

Я просто не могу изменить высоту и ширину изображения в Material-UI CardMedia image: ниже мой код. 

 <Grid
    container
    spacing={36}
    direction="column"
    alignItems="center"
    justify="center"
    style={{
      minHeight: "100vh",
      backgroundImage: `url(${Image})`,
      height: "100%",
      backgroundPosition: "center",
      backgroundRepeat: "norepeat",
      backgroundSize: "cover"
    }}
  >
    <Paper style={{ height: "740px", width: "500px" }}>
      <Card className={classes.card}>
        <CardActionArea>
          <CardMedia
            style={{
              height: "40px",
              marginLeft: "113px",
              paddingLeft: "56.25%",
              paddingTop: "56.25%", // 16:9,
              marginTop: "20px",
              width: "30px"
            }}
            image={require("../../../Images/ApLogo/111.jpg")}
            title="Login"
          />
          <CardTitle
            title="Log In"
            style={{
              marginLeft: "220px",
              marginTop: "10px",
              fontWeight: "bold"
            }}
          />
          <CardContent>
            ......
          </CardContent>
        </CardActionArea>
      </Card>
    </Paper>
  </Grid>

Я посмотрел через это и это . Но ни одна из них не решила мою проблему.

Ответы [ 2 ]

0 голосов
/ 16 марта 2019

Вы можете применять свои стили с className реквизитом. Вот пример: 

const { withStyles, Card, CardHeader, CardMedia, CardContent, Typography} =  window['material-ui'];

const styles = theme => ({
  card: {
    maxWidth: 400,
  },
  media: {           // this is the`className` passed to `CardMedia` later
    height: 100,     // as an example I am modifying width and height
    width: '33%',
    marginLeft: '33%'
  },
});

class Demo extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <Card className={classes.card}>
        <CardHeader
          title="Shrimp and Chorizo Paella"
          subheader="September 14, 2016"
        />
        <CardMedia
          className={classes.media}
          image="https://picsum.photos/800/450"
          title="Paella dish"
        />
        <CardContent>
          <Typography component="p">
            This impressive paella is a perfect party dish and a fun meal to cook together with your
            guests. Add 1 cup of frozen peas along with the mussels, if you like.
          </Typography>
        </CardContent>
      </Card>
    );
  }
}

const App = withStyles(styles)(Demo);


ReactDOM.render(<App />, document.querySelector('#root'));
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@3.9.2/umd/material-ui.production.min.js"></script>

<div id="root"></div>
0 голосов
/ 16 марта 2019

Вы можете пропустить CardMedia и написать div с фоном или использовать тег изображения внутри CardActionArea.

Или исправьте реквизиты CardMedia, как здесь

Поскольку CardMedia не поддерживает стиль prop 

`<CardMedia
      component="img"
      alt="Contemplative Reptile"
      className={classes.media}
      height="140"
      image="/static/images/cards/contemplative-reptile.jpg"
      title="Contemplative Reptile"
 />`
...