解决图片拉伸问题(涉及'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的时候统一处理一下.

总结:

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