JSFiddle - React, Tailwind, and code Playground

by lin zhou

HTML

<div>
<img width="30%" height="30%" src= "https://www.rhbody.com/uploads/images/topics/201806/13/1/LtiNQWgCyP.png" />
</div>

<div class="img-b bg">

</div>

<div class="img-b bg0">

</div>

<div class="img-b bg1">

</div>

<div class="img-b bg2">

</div>

<div class="bg3">
  <img src= "https://www.rhbody.com/uploads/images/topics/201806/13/1/LtiNQWgCyP.png" />
</div>

<!-- 小图的时候 -->
<div>
<img  src= "https://qiniu.qiubg.com/gmv.jpg" />
</div>

<div class="img-s bg">

</div>

<div class="img-s bg0">

</div>

<div class="img-s bg1">

</div>

<div class="img-s bg2">

</div>

<div class="bg3">
  <img src= "https://qiniu.qiubg.com/gmv.jpg" />
</div>

CSS

.img-b{
  background:url(https://www.rhbody.com/uploads/images/topics/201806/13/1/LtiNQWgCyP.png) no-repeat center;
}

.img-s{
   background:url(https://qiniu.qiubg.com/gmv.jpg) no-repeat center;
}

.bg{
  display:inline-block;
  width:300px;
  height:300px;
  background-size: 300px 300px;
}

.bg0{
  display:inline-block;
  width:300px;
  height:300px;
}


.bg1{
  display:inline-block;
  width:300px;
  height:300px;
  background-size:cover;
}

.bg2{
  display:inline-block;
  width:300px;
  height:300px;
  background-size:contain;
}

.bg3{
    display:inline-block;
    width:300px;
    height:300px;
}

.bg3 img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}