page contents

CSS实现自适应正方形、等宽高比矩形?

轩辕小不懂 发布于 2021-12-07 15:40
阅读 779
收藏 0
分类:WEB前端开发
2594
小柒
小柒

a.双重嵌套,子绝父相

.outer {

 padding-top: 50%;

 height: 0;

 background: #ccc;

 width: 50%;

 position: relative;

}

.inner {

 position: absolute;

 width: 100%;

 height: 100%;

 top: 0;

 left: 0;

 background: blue;

}

b.padding撑高画正方形

.outer {

 width: 400px;

 height: 600px;

 background: blue;

}

.inner {

 width: 100%;

 height: 0;

 padding-bottom: 100%;

 background: red;

}

c.相对于视口VW VH

.inner {

 width: 1vw;

 height: 1vw;

 background: blue;

}

d.伪元素设置margin-top

.inner {

 width: 100px;

 overflow: hidden;

 background: blue;

}

.inner::after {

 content: "";

 margin-top: 100%;

 display: block;

}

请先 登录 后评论