CSS中经常会有宽是高的2倍的需求。比如说,你想设计一个正方形的图标,但又需要它比较宽。那么怎么做呢?
.icon { width: 100px; height: 50px; /* 宽是高的2倍 */ }
其实很简单,只需要让宽是高的2倍即可。如上代码所示,可以将高设为50px,而宽设为100px,这样宽就是高的2倍了。
这种方法可以用在各种场景中。比如说,你想设计一个长条形的按钮,但它太窄了,看起来不够好看。那么你可以将宽设为按钮高度的2倍,这样按钮就会有一些宽度了。
.btn { height: 40px; width: 80px; /* 宽是高的2倍 */ }
另外,如果你想要一个正方形的图片,但又希望它比较大,也可以使用这种方法。
.img { height: 200px; width: 400px; /* 宽是高的2倍 */ }