html下拉菜单不改变父元素高度,请问，如何通过CSS实现高度height随宽度width变化而变化，保持长宽比例不变，宽度是根据父元素宽度变化的？...

宽高保持不变，你参考下，内容要绝对定位

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'

})