css3图片像左右裁剪

html:结构

<div class=" smallpic">

<div>

<a href="javascript:void(0)" class="frame frame-landscape">
                  <img src="../../styles/img/timg-s.png">
          </a>                        

</div>

</div>

css3:样式

 .smallpic div>a{
        height: 162px;
        width: 250px;
    }
    .frame{
        position: relative;
        left: 60%;
        top: 50%;
        transform: translate(-60%,-50%);
        -webkit-transform: translate(-60%,-50%);
        -ms-transform:translate(-60%,-50%);
        overflow: hidden;
    }
    .frame-landscape img {
        width: auto;
        height: 100%;
    }

个人理解：将父级中的图片定位偏离，且父级的宽度要大于图片的宽度，在利用transform将图片移动到正中，这样图片在父级的两侧会有一定的空隙，

  当浏览器慢慢缩小时，图片会向中间剪切