reactjs - 使用Semantic UI React,如何设置图像头像的宽度和高度?

标签 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;
}

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

最佳答案

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

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

关于reactjs - 使用Semantic UI React,如何设置图像头像的宽度和高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46842290/

相关文章:

css - Semantic-UI:在工具提示中添加换行符

reactjs - React Datetime Picker 组件与 Semantic UI React 示例

javascript - 将状态作为 Prop 传递给 child 是好的做法吗?

javascript - TypeError : Cannot read property 'type' of undefined functional components

css - 以微型尺寸显示 PDF 的语义 UI 模态

javascript - 如何在 JavaScript 中创建嵌套菜单?

javascript - 如何更改 Semantic-UI React 的选项卡标题宽度(垂直选项卡)

javascript - 如何在 ExtReact 中显示菜单时停止圆圈单击按钮;

javascript - React - 当 Prop 改变时改变状态

html - 如何在语义 UI 中使用堆叠段?