要实现一个宽高等比的自适应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; }
网友评论