material-ui-next: установка размера изображения для размещения в контейнере - PullRequest
Новая
       88

material-ui-next: установка размера изображения для размещения в контейнере

0 голосов
/ 09 мая 2018

Я начал с Material-ui-next и у меня возникли некоторые проблемы с отображением изображений, которые используют весь размер контейнера. Например. Я использую: 

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    height: 550
  }
});

В рендере: 

<Card className={classes.Card}>
   <CardMedia
        className={classes.Media}
        image={ImgPomodoR}
        title="a pomodoro tomatoe timer in material design"
   />
   <CardContent>
      <Typography gutterBottom variant="headline" component="h2">
        ...

В документации сказано, что я должен указать высоту для отображения изображения. Пример 'media' дает изображению высоту 0, однако, если я укажу, что мое изображение не отображается - упомянутый пример .

Прямо сейчас для меня это метод проб и ошибок Media-height, что он умещается в контейнер с картой без обрезки. Есть ли «автоматический» способ сделать это?

Любая помощь высоко ценится, ура товарищи,

Tobias

Редактировать: я должен отметить, что height: "100%" // maxHeight: "100%" также не работает для меня.

1 Ответ

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

У меня была такая же проблема. Настройка width и height на '100%' работала для меня. 

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    height: '100%',
    width: '100%'
  }
});

Однако, если ваши изображения имеют разную высоту, это приведет к тому, что карты будут иметь разную высоту, и большую часть времени это будет не то, что вам нужно. Для этого вы можете указать height и оставить width на '100%'. 

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    height: 550,
    width: '100%'
  }
});

Это растянет изображения до размера контейнера. В моем случае я хотел, чтобы часть изображения отображалась без растяжения изображений. Для этого просто установите для свойства objectFit значение cover. Это хорошо сработало для меня. 

const styles = theme => ({
  Card: {
    width: 300,
    margin: 'auto'
  },
  Media: {
    height: 550,
    width: '100%',
    objectFit: 'cover'
  }
});

Надеюсь, это кому-нибудь поможет,

...