CSS3 vw 單位
Paste_Image.png
100vw = 100% 視窗寬度
100vh = 100% 視窗高度
這樣實現自適應正方形(固定長寬比例的容器)就會相當簡單!
[lang=stylus]
.box
width 10vw
height 10vw
既然是新單位, 必然就會有 兼容性問題.
[lang=jade]
.img-box
img(src="img/a.png")
[lang=stylus]
.img-box
width 10vw
height 10vw
img
width 100%
height 100%
object-fit cover
Paste_Image.png
代碼正常效果應該是上左圖, 實現一個正方形盒子里放一張圖片, 自適應居中
然而安卓4.4手機里, 圖片會失真, 高度不是以 .img-box 計算的, 如上右圖 (object-fit cover 在 安卓 4.4 下也無效的)
偶然發(fā)現可以通過 給圖片設置 position absolute 解決高度錯誤問題 (object-fit cover 無效)
[lang=stylus]
.img-box
width 10vw
height 10vw
position relative
img
position absolute
left 0
top 0
width 100%
height 100%
object-fit cover
css3 新的 flex vw vh 讓布局靈活方便很多
正方形不再使用 padding-bottom 100% 讓人看不容易不懂的方法了
最后希望大家多用 chrome 早日脫離 IE
