15.pc端图片的高度比例显示

2019-12-07  本文已影响0人  最爱喝龙井

在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;
}
上一篇下一篇

猜你喜欢

热点阅读