css 图片错位解决方案

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

     html：

        

                   

                                   

               

 

                      wrapper">

                           

                              

                 

         

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%;

}