图片添加border 不占用图片的大小

因为设计稿中的分割线大多分为两种情况：
1、在图片右侧；
2、在图片右侧+下方。

那么使用伪类before和after以及绝对定位很容易在不改变原布局的情况使图片按照设计稿输出和保留分割线。

例div.img-wrap > img的结构，如下:
1、可以先给包裹图片的wrap设好高度和宽度，positon设为relative；
2、图片的大小不需要改变，为以防万一也可以把宽高设为100%，当调整时只需要调整wrap宽高，img就可以不动了；
3、为wrap的伪类(before和after)设置属性和属性值，可做成公用的:
content:'';
display:block;
position:absolute;
4、分别给before和after设置相应的值，例如右侧分割线：
.img-wrap:before{
1px;
height:100%;
top:0;
right:0;
}
5、为减少代码量可以做成公共部分:
用SASS的话extend那个类就好;
用普通css的话把类加在html里就可以了。