Семантический интерфейс реагирует на размер изображения на элемент изображения - PullRequest
Новая
       9

Семантический интерфейс реагирует на размер изображения на элемент изображения

1 голос
/ 15 апреля 2019

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

<Image> принимает пропеллер размера, поэтому я установил его на massive, как показано ниже. Это как бы имеет противоположный эффект и не делает изображение намного больше, чем если бы я установил его на tiny. Я предоставил песочницу для визуального представления.

Это ошибка или я неправильно установил опору? Может быть <Image> завернутый в <Header> ведет себя по-другому? 

const HomepageHeading = ({ mobile }) => (
  <Container text>
    <Header
      as="h1"
      inverted
      style={{
        fontSize: mobile ? "2em" : "4em",
        fontWeight: "normal",
        marginBottom: 0,
        marginTop: mobile ? "1.5em" : "3em"
      }}
    >
      <Image
        size="massive"
        src="https://react.semantic-ui.com/images/avatar/large/patrick.png"
      />
    </Header>

    <Header
      as="h2"
      content="Something"
      inverted
      style={{
        fontSize: mobile ? "1.5em" : "1.7em",
        fontWeight: "normal",
        marginTop: mobile ? "0.5em" : "1.5em"
      }}
    />
  </Container>
);

1 Ответ

1 голос
/ 15 апреля 2019

Вы правы. Компонент Header содержит стили, которые переопределяют стили, применяемые с помощью параметра Размер изображения.

Я вижу, что заголовок добавляет ширину 2.5em, перекрывая 960px, который пытается установить пропеллер массивного размера.

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

Попробуйте добавить к изображению следующее:

style={{width: '960px', height: 'auto'}}

...