Блог

Главная - Вопросы по программированию - Как мне сделать ширину этого материала-карты пользовательского интерфейса автоматической, чтобы он соответствовал ширине страницы при сохранении максимальной высоты

Как мне сделать ширину этого материала-карты пользовательского интерфейса автоматической, чтобы он соответствовал ширине страницы при сохранении максимальной высоты

#html #css #reactjs #material-ui #frontend

#HTML #css #reactjs #материал-пользовательский интерфейс #интерфейс

Вопрос:

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

 wwwusnews_root: {
        width: 'auto',
        paddingTop: theme.spacing(17),

    },
    wwwusnews_media: {
        maxHeight: 640,
        backgroundColor: '#d8d8d8',
        //src: {usnews}
    }
  
 <Card className={classes.wwwusnews_root}>
            <CardActionArea>
                <CardMedia
                    className={classes.wwwusnews_media}
                    image={usnews}
                    title="Students in masks"
                />
            </CardActionArea>
        </Card>

Комментарии:

1. ширина auto не будет соответствовать размеру дисплея; это изменит ширину элемента на увеличение или уменьшение в зависимости от содержимого внутри элемента. Чтобы ширина соответствовала дисплею, используйте width: '100%' . Вы пробовали это?

2. @Jake B. да, и я не думаю, что материал-пользовательский интерфейс использует 100% в качестве переменной, я вижу, что width: 1; эквивалентно, но я, должно быть, делаю что-то неправильно

3. Можете ли вы прикрепить изображение нужного вида?

4. Я имею в виду ваш ожидаемый результат… Будет лучше, если вы также сможете загрузить свой текущий результат..

5. @mjm, стиль, который вы применяете, является свойством класса CSS, а не переменной; вы должны иметь возможность устанавливать значение ширины на все, что вам нравится; но я могу ошибаться, если это задокументировано где-то еще в API