最近研究了一下网易考拉海购的对于错位图的研究,实现代码如下:
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%;
}