object-fit属性值效果实例页面

展示

代码

• HTML：

  <h4>object-fit:fill</h4>
  <img src="1.jpg">
  <h4>object-fit:contain</h4>
  <img class="contain" src="1.jpg">
  <h4>object-fit:cover</h4>
  <img class="cover" src="1.jpg">
  <h4>object-fit:none</h4>
  <img class="none" src="1.jpg">
  <h4>object-fit:scale-down（图片尺寸足够）</h4>
  <img class="scale-down" src="1.jpg">
  <h4>object-fit:scale-down（图片尺寸小）</h4>
  <img class="scale-down" src="s/1.jpg">

• CSS：

  img {
      width: 200px; height: 200px;
      padding: 20px;
      border: 20px solid rgba(20, 30, 255, .5);
  }
  .fill { object-fit: fill; }
  .contain { object-fit: contain; }
  .cover { object-fit: cover; }
  .none { object-fit: none; }
  .scale-down { object-fit: scale-down; }