简介
一个网站的logo
它的宽度是不固定的,并且要求它的高度与它的宽度相等也就是正方向,用css
实现。
在以前的一篇文章中有记录深入理解 css 系列 css 中 padding,可以通过padding
的百分比是规定基于父元素的宽度的百分比的内边距。
也可以通过vh、vw
实现
实现
通过 padding 实现
1 | <style> |
这样就可以创建一个宽高1:1
的正方形,只需要修改header
元素的宽度就可以动态修改logo
元素的大小。
通过 vh、vw 实现
1 | <style> |
把logo
元素的宽高通过设置为vh、vw
来实现他们的的宽度和高度值都来自与屏幕的宽或高。
通过 rem 实现
1 | <html lang="en" font-size="12px"> |
通过设置html
元素上的font-size: 12px
,logo
元素的宽高通过 rem 控制为10rem
也可以实现宽高1:1
的元素。
通过 js 实现
1 | <style> |
只设置logo
元素的宽度,默认通过 js 获取logo
元素的宽度赋值给高度,后面监听窗口变化适时更新高度。
总结
上面一共通过四种方法来实现的宽高 1:1,并且高度跟随宽度变化。其实上面四种解决方法比较相近,如果有更好的方法请留言探讨,谢谢。