美文网首页
CSS设置背景图宽度100%,高度自适应

CSS设置背景图宽度100%,高度自适应

作者: chouchou723 | 来源:发表于2019-09-17 10:34 被阅读0次
    <div class="newcenter"></div>
    .bg{
           width: 100%;
           background: url('./74123.jpg') no-repeat;
           padding-top: 40%;
    /*background-size: 100% auto;
           height: 0px;*/
    background-size:cover;
            background-position:center;
       }
    

    padding-top= (高度/宽度)*100%;即图片的高度与宽度的比例,因此就能实现背景图宽度100%,高度自适应
    为了达到更好的效果再配合cover和center


    bgbg.png

    相关文章

      网友评论

          本文标题:CSS设置背景图宽度100%,高度自适应

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