Semantic UI react size prop on image element

I have a HomepageHeading that I'm rendering at the top of the pages in my app. I'm using a custom image inside a <Header> and trying to adjust the size so it's fairly large.

<Image> takes a size prop, so I set it to massive as seen below. It sort of has the opposite effect and doesn't make the image much bigger than If I set it to tiny. I have provided a sandbox for visual.

Is this a bug or am I setting the prop incorrectly? Maybe <Image> wrapped inside a <Header> behaves differently?

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>
);

Solution

You're right the Header component contains styling that overrides the styles being applied by the Image size prop.

I'm seeing that the Header is adding a width of 2.5em overriding the 960px that the massive size prop is trying to set.

To make the image the size that you want, you're going to have to apply your own styles to it.

Try adding the following to Image:

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