解决图片拉伸问题(涉及'border'与'点9图')

一. 遇到的问题

开发工作中, 经常会涉及到设置背景, 比如popup、下拉框、提示框等等场景, 下图展示一下问题的所在, 然后会详细列出问题涉及的面

我手绘的有点烂实在抱歉!
比如设计师为我们设计一个下拉框的背景.
-->正常: 也就是设计是给到我们的图, 比例看着很舒服, 四个角的黑色你可想把它想象成装饰品.
-->抻拉: 实际场景中, 谁也不知道会出现多少个选项, 所以这个下拉框可能会被拉的很长很长, 随着整体的拉长四个黑色的角也会被拉长, 毕竟都是图片的一部分.
-->期望: 我们真正想要的效果, 四个角的大小比例不要变, 而是中间部分拉长就可以了.

我之前还遇到背景图放到iphonex上面被拉的面目全非的场景

二. 解决问题的思考

初步分析

1. 之所以会出现这种问题, 那就是因为这个图是个整体, 要变肯定一起变.
2. 最先想到的方法: ui给我上,中,下三部分的图, 然后我把他们拼接在一起, 上下固定, 中间随高度自适应.

遗留问题

1. 如果变成了由于下拉框内容太长, 需要横向拉伸, 那是不是还要ui给我左,中,右图???
2. 每次给3张图, 非常不方便.
3. 代码写起来不爽快.

三. 神奇的border-image

看字面意思border-image边框图, 那么就会联想到, 比如说上边框与dom元素高度一样, 那么上边框的图会不会就是dom元素的背景图了, 也就是搞个障眼法玩玩.
但是只是设置border-image肯定是不够的, 真正厉害的是他的两个属性
##### border-image-width
##### border-image-slice
去学习这个border-image的相关属性的时候才发现他有多么的神奇, 具体对这个属性的详细解答我感觉自己可能做不好, 所以详细的内容大家自行百度学习一下吧, 我下面来说一下干货理解:

1. border-image-slice: 10 10 10 10;(不带单位默认px, 因为是针对原图的, 所以没必要考虑外界因素)把整个图进行了切分, 一共四次切分, 化为了9个区域 如图: 图里面的'圈'就相当于装饰物, 切割的顺序就是上,右,下,左, 对应着一刀,二刀,三刀,四刀.

1. 切分之后可以指定四个角的宽度, 让其不随整体宽高的变化而变化, border-image-slice: 10px 10px 10px 10px;.

四. 点9图

上面只是说明了理论上的可行性, 那么这些想法的实现就需要ui同学的配合了, 点9图是andriod平台的应用软件开发里的一种特殊的图片形式, 这个也是在我换到新的岗位时接到了所谓的点9图, 就赶快查了一下百度解惑, 简单理解就是点9图也指出了上面提到的"四刀"的具体切割位置, 它也是把图片分为了9个部分, 与我们前面说的不谋而合.
点9图比较重要的一点就是指出了ui希望的切割位置!

五. 出现了白色细线

这个白色细线就是"点9图"的一个小bug了, 如图所示

竟然把4刀的纹路显示了出来, 这个样式可是太丑了, 我也是第一次遇到这种问题, 没有找到很好的解决方案, 后来请教了我们的负责人才弄懂.

六. "解决"它

1. 先要测量出他的"四刀"的宽度, 测量原图即可.

1. 附加属性

     border-image-slice: 12 34 12 34 fill;
     border-image-width: 12px 34px 12px 34px;

改变的宽高也"轻易"不会出现白色的细线了, 为什么说"轻易", 因为在实际开发中分辨率不同的电脑还可能是会出现一点线, 暂时没找到100%解决的方法.

七. 回顾与进步

上述所说仍有不足, 想做做到完美必须有ui的配合, 前端更智能化的测量, 比如说我可以做一个上传img自动帮他生成 border相关属性的小插件,也是挺不错的, 但是我们公司接下来要统一处理这个问题了, 也就不用我们一张一张的去找这样麻烦, 可能公司会在ui交付img的时候统一处理一下.

总结:

一些比较冷门的属性也许有一天也会大放异彩, 不断的扩充自己的知识面才能更好的解决现实中的问题, 加油!终身学习.