正方形,响应式布局
写手在作画的夜晚,留下路人惊叹
在这里感谢 我是一名好程序员
响应式布局中的正方形效果
使用padding-bottom; position: relative;
最外层的div
width: 50%;
height: 0;
float: right;
text-align: center;
background: rgba(231, 230, 230, 1);
padding-bottom: 50%;
position: relative;
子元素
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
子元素中的子元素就是背景图的div
background: url('') no-repeat center center;
background-size: 100% 100%;
居中的图标
图标居中就好啦