美文网首页
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