在做一个用户可配置的展示模块(类似阅读条款),背景图片需要做成可配置的, 图片填充样式比较麻烦
参考windows里的配置
win10 -> 个性化 -> 选择契合度, 里边有:
这几种, 需要和样式对应起来, 查了半天英文的资料都没把这些东西汇总起来…
一.示例
以
为例(chrome以外的还没测)
有这么几个选项
1.contain
contain:按图像原始比例拉伸,直到横向或者纵向碰边,则停止拉伸(有一边碰到边就停)
用于显示完整图像,原始比例,不剪裁,未碰边的方向会有留白
2.cover
cover: 按图像原始比例拉伸,直到横纵两边全都碰边(第一边碰到后继续拉,另一边又碰边后停止)
用于充满背景画布,原始比例,图像和背景画布比例不一致时会剪裁,不会留白
3.initial
initial: 按图片本来的像素长宽显示, 不操作图片
显示原始图片,原始比例,图片小的话大量留白,图片过大的话剪裁很多
4.100% 100%;
除上述以外,另外还有个需求:扭曲图像,按背景画布的长款填满
background-size: 100% 100%;
非原始比例,不剪裁,不留白
(我觉得这个选项应该给个语法糖)
二.结论
所以结论是:
填充(Fill) 对应cover
适应(Fit) 对应 contain
拉抻(Stretch) 对应100% 100%;
平铺(Tile) 对应Center且background:repeat
居中(Center) 对应initial且background:no-repeat
跨区(多屏不管)
结果chrome里还不错, 仅用css3就能解决问题, js增减参数就可以了