1,如果是顶层DIV ,要保持宽度和高度一致
可以直接定义宽度的尺寸为 10vw, 高度的尺寸也是 10vw,而不是10vh。
2,对不是顶层DIV,如何保持DIV 的宽度和高度一致:
.iframe span { position: absolute; z-index: 2; top: 2%; left: 2%; display: block; /* 这样可以确保高度按宽度自动计算 */ font-size: 0; line-height: 0; width: 4%; height: 0; padding: 4% 0 0; /* height: calc(5%); */ background: rgba(0, 0, 0, 0.3) url(images/goback.png)center/90% no-repeat; border-radius: 5px; -webkit-border-radius: 5px; cursor: pointer; }
关键代码是:
font-size: 0;
line-height: 0;
4%;
height: 0;
padding: 4% 0 0;
这样定义了宽度是 4%,高度是用padding来实现的,即上边距 为 4% ,是参考宽度的,于是 高度也和宽度 一样是 4%。