cover和contain效果实例页面

展示

代码

• HTML：

  <h4>cover</h4>
  <div class="bg-cover"></div>
  <h4>contain</h4>
  <div class="bg-contain"></div>

• CSS：

  .bg-cover,
  .bg-contain {
      width: 128px; height: 128px;
      border: solid deepskyblue;
      background: url(1.jpg) no-repeat center;    
  }
  .bg-cover {
      background-size: cover;
  }
  .bg-contain {
      background-size: contain;
  }