CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
AnApprentice
AnApprentice

Reputation: 110970

With Semantic UI React, how to set the width and height for Image Avatar?

I'm using: https://react.semantic-ui.com/elements/image#image-example-avatar

      <Image avatar width={32} height={32} src={'/xxx.jpg'} />

Problem is, the Image avatar is not using the width and height params, and instead is using the assigned CSS:

.ui.avatar.image, .ui.avatar.image img, .ui.avatar.image svg, .ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.images svg {
    margin-right: .25em;
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 500rem;
}

How can I set the width and height for a <Image avatar... > using Semantic UI React?

Upvotes: 3

Views: 7728

Answers (1)

user2962393
user2962393

Reputation: 1163

Avatar image size is tied to the effective font size. A quick way to control the effective font size is

<Image style={{'font-size':42}} avatar src={'/xxx.jpg'}/>

Upvotes: 7

Related Questions