美文网首页
15.pc端图片的高度比例显示

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

作者: 最爱喝龙井 | 来源:发表于2019-12-07 09:50 被阅读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;
}

相关文章

网友评论

      本文标题:15.pc端图片的高度比例显示

      本文链接:https://www.haomeiwen.com/subject/dloygctx.html