JSFiddle - React, Tailwind, and code Playground

by echizen

HTML

<div class="item-media">
     <i class="icon contactsLogo" id="logoPreview"></i>
</div>

<div class="imgWrap">原图
    <img src="http://www.huiyouxing.com/image/meeting.png" />
</div>

<hr />
<div class="item-media" >
     <i class="icon contactsLogo contactsLogo1" id="logoPreview"></i>
</div>

<div class="imgWrap">原图
    <img src="http://www.huiyouxing.com/image/down.png" />
</div>

CSS

i.icon.contactsLogo{
    width: 100px;
    height: 100px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('http://www.huiyouxing.com/image/meeting.png');
    display: inline-block;
    vertical-align: middle;
}

.imgWrap,.imgWrap img{
    width:100px;
}

i.icon.contactsLogo1{
    background-image: url('http://www.huiyouxing.com/image/down.png');
}