美文网首页Web前端知识点
实现一个宽高自适应的DIV

实现一个宽高自适应的DIV

作者: 浪漫天下 | 来源:发表于2018-10-24 09:10 被阅读0次

    要实现一个宽高等比的自适应DIV,且宽高是根据父级变化的。

    1、首先设置DIV的width:50%;,这样DIV的width就是父级width的50%,可以实现自适应。

    2、现在就是想办法实现DIV的height实现自适应:

    1⃣️设置height:auto;只是让DIV的宽度随自身内容大小变化,不能和DIV的width等比;

    2⃣️想办法让DIV的height和父级的width扯上关系:

    padding属性是根据父级width来决定的。padding-top、padding-bottomd都是根据父级width有关联。只要我们设置DIV的padding-bottom:50%;就可以让DIV的height随父级width变化。

    3⃣️完整css为:

                          .child{ width: 50%; height: 0px; padding-bottom: 50%; background-color: blue; }

    相关文章

      网友评论

        本文标题:实现一个宽高自适应的DIV

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