css 图片错位解决方案

最近研究了一下网易考拉海购的对于错位图的研究，实现代码如下：

     html：

        <li class="m-goodsitem2">                    

               <!-- 商品图片 -->                    

                <div class="m-picitem">  

                      <a href="" class="img-wrapper">

                           <img src="">

                         </a>     

                 </div>

         </li>

css: 

 img {
    vertical-align: middle;
}

.m-picitem {

    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

.m-picitem .img-wrapper {
    display: block;
    padding-top: 100%;

}

.img-wrapper img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}