Показывать изображение переменного размера в диалоговом окне MUI правильно - PullRequest
Новая
       15

Показывать изображение переменного размера в диалоговом окне MUI правильно

0 голосов
/ 06 июня 2019

У меня есть диалоговое окно MUI, в котором мне нужно отобразить три вещи ниже друг друга:

  • изображение, которое должно сохранять аспект , но в остальном занимать все оставшиеся пробелы
  • текст, охватывающий 1-3 строки
  • несколько входов

Там должно быть без прокрутки , вместо этого изображение должно масштабироваться должным образом.

То, что я сделал, выглядит ужасно и ведет себя по-разному в разных браузерах.

Я создал песочницу .

Это по моему withStyles: 

content: { // DialogContent
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch',
},
imageDiv: { // the div enclosing the img
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    flex: '1 1',
    width: '100%',
},
image: { // the img itself
    width: 'auto',
    height: 'auto',
    maxWidth: '80%',
    objectFit: 'contain',
    display: 'block',
    marginLeft: 'auto',
    marginRight: 'auto',
},
text: { // the div with the multiline text
    flex: '1 0',
    margin: 10,
    width: '100%',
},
input: { // the divs with the inputs
    flex: '1 0',
    margin: 10,
    width: '100%',
},

Вопрос: как мне заставить его вести себя правильно, т. Е.

  • без прокрутки, полная высота
  • изображение изменяется по мере необходимости, сохраняя соотношение сторон
  • все остальное сохраняет свой обычный размер
...