我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.
是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比?
我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.
是否可以设置与宽度相同的高度(比例1:1)?
例
+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+
Run Code Online (Sandbox Code Playgroud)
CSS
div {
width: 80%;
height: same-as-width
}
Run Code Online (Sandbox Code Playgroud) 当我给图像一个百分比的宽度或高度时,它只会增长/缩小保持其纵横比,但如果我想要与另一个元素相同的效果,是否可以使用百分比将宽度和高度联系在一起?