宽高保持不变,你参考下,内容要绝对定位
css_square.main {
width: 600px;
}
.rect1 {
position: relative;
width: 50%;
background: #f30;
padding-bottom: 50%;
}
.rect1 > .inner,
.rect2 > .inner {
padding: 100px;
position: absolute;
top: 50%;
left: 50%;
background-color: #0ac;
-webkit-transform: translate(-50%, -50%);
}
.rect2 > .inner {
background-color: #0cc;
}
.rect2 {
position: relative;
width: 50%;
background: #f30;
}
.rect2:before {
content: "";
display: block;
padding-top: 100%;
width: 100%;
background: #08c;
}
纯CSS实现正方形布局
document.querySelector('#range').addEventListener('change', function(e) {
document.querySelector('.main').style.width = 600 + this.value/1 + 'px'
})