clip剪裁与原始尺寸研究实例页面

展示

滚动条出现

图片clip剪裁不可见

代码

• HTML：

  <h4 class="title">滚动条出现</h4>
  <div class="box">
    <img src="1.jpg">
  </div>
  <h4 class="title">图片clip剪裁不可见</h4>
  <div class="box">
    <img src="1.jpg" class="clip">
  </div>

• CSS：

  .box {
      width: 300px; height: 100px;
      background-color: #f0f3f9;
      position: relative;
      overflow: auto;
  }
  .box > img {
      width: 256px; height: 192px;
      position: absolute;
  }
  .clip {
      position: absolute;
      clip: rect(0 0 0 0);
  }