向素材ui卡添加縮略圖

我在我的應用程序中使用Material-UI卡。目前這張卡很平面，有標題。我想在卡片的最左側有一個縮略圖，並在卡片的旁邊，例如某些應用程序中的歌曲列表。我嘗試過但我無法實現。有什麼方法可以將圖像作爲縮略圖添加到卡上（最左側）。我想匹配縮略圖高度和卡片高度，縮略圖應從左邊緣開始（無邊距）。有人能幫我嗎？向素材ui卡添加縮略圖

這裏是我當前的卡代碼：

render(){ 
    return (
     <div> 
      <MuiThemeProvider> 
       <Card style= {{marginBottom: 2}} 
         onTouchTap={() => {this.props.handleClick(this.props.id)}} 
         zDepth={this.state.shadow}> 
        <CardHeader 
         style={{fontFamily: 'Roboto, sans-serif', fontWeight:600}} 
         title={this.props.title} 
         //subtitle={value.description} 
         actAsExpander={false} 
         showExpandableButton={false} 
        /> 
       </Card> 
      </MuiThemeProvider> 
     </div> 
    ); 
}

來源

2016-11-25 user3559063

你能嘗試，如果''會的工作？否則，你需要一個定製的CSS解決方案。 –

頭像會給我圓形圖像 – user3559063

將頭像img的border-radius設置爲「0」，那麼它是方形的。您還可以調整大小和填充物，使其適合您。 –

你最好是去創建自己的組件，或可能使用列表/列表項在您leftAvatar正方形圖片：

的jsfiddle： https://jsfiddle.net/42f81uvv/1/

<List style={{ width: 400 }}> 
    <ListItem 
    innerDivStyle={{ paddingLeft: 80 }} 
    leftAvatar={ 
     <img style={{ height: '100%', margin: -16 }} src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png" /> 
    } 
    primaryText="Some Title" 
    secondaryText="That's a good looking thumbnail" 
    /> 
</List>

來源

2016-11-25 20:22:16

向素材ui卡添加縮略圖

回答

相關問題