CODEWITHSUNDEEP
reactjssemantic-ui
DJ2
DJ2

Reputation: 1751

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

Upvotes: 2

Views: 3473

Answers (2)

Jordan Dodson
Jordan Dodson

Reputation: 455

I ran into this issue after updating my semantic-ui-react dependency. An <Image> inside a <Header> would always look as if it had size='tiny'. I traced this behavior down to this rule

.ui.header>img {
  width: 2.5em 
}

Solution

I simply wanted the size attribute of my <Image> to work as usual, so I added an override in one of my personal stylesheets.

/* Semantic UI override */
.ui.small.image {
    width: 150px !important;
}

The only addition here is the !important modifier at the end. Now size='small' works on my <Image> like normal. Voila!

Upvotes: 0

lala
lala

Reputation: 169

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'}}

Upvotes: 1

Related Questions