object-position属性效果实例页面

展示

代码

• HTML：

  <h4>object-position:100% 100%</h4>
  <img class="position-1" src="1.jpg">
  <h4>object-position:right 20px bottom 10px</h4>
  <img class="position-2" src="1.jpg">

• CSS：

  img {
      width: 200px; height: 200px;
      padding: 20px;
      border: 20px solid rgba(20, 30, 255, .5);
      background: repeating-linear-gradient(135deg, deepskyblue, deepskyblue 2px, white 3px, white 8px);
      background-clip: content-box;
      object-fit: contain;
  }
  .position-1 {
      object-position: 100% 100%;
  }
  .position-2 {
      object-position: right 20px bottom 10px;
  }