在pc端图片的高度百分比不好设置,这里我们可以通过padding来设置百分比,因为padding的百分比高度是根据父元素的百分比计算的
<div class="mv-item-wrap">
<div class="mv-item">
<a href="mvshow.html">
<img src="images/mv1.jpg" alt="">
</a>
</div>
</div>
css部分:
.mv-item-wrap {
width: 18%;
margin-bottom: 20px;
}
.mv-item {
width: 100%;
padding-bottom: 60%;
overflow: hidden;
position: relative;
left: 0;
top: 0;
}
.mv-item img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
transition: all .6s ease;
}
网友评论