使用Semantic UI React,如何设置Image Avatar的宽度和高度?

时间:2017-10-20 04:16:43

标签: reactjs semantic-ui semantic-ui-react

我正在使用:https://react.semantic-ui.com/elements/image#image-example-avatar

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

问题是,图片头像没有使用宽度和高度参数,而是使用指定的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;
}

如何使用Semantic UI React设置<Image avatar... >的宽度和高度?

1 个答案:

答案 0 :(得分:5)

头像图片大小与有效字体大小相关联。控制有效字体大小的快捷方法是

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