Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    div{
      width: 500px;
      height: 300px;
      border: solid 2px red;
      background-color: white;
      background-image: url('http://o905ne85q.bkt.clouddn.com/5df2bea83bbf3a90ca130c70.jpg')
    }
  .img-contain{
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .img-cover{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
  }
  </style>
</head>
<body>
  <h1>图片居中</h1>
  <div class="img-contain"></div>
  <h1>图片填充</h1>
<div class="img-cover"></div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
godbasinpro
0viewers