图片添加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{
width:1px;
height:100%;
top:0;
right:0;
}
5、为减少代码量可以做成公共部分:
用SASS的话extend那个类就好;
用普通css的话把类加在html里就可以了。
图片添加border 不占用图片的大小的更多相关文章
- php 图片添加文字水印 以及 图片合成(微信快码传播)
1.图片添加文字水印: $bigImgPath = 'backgroud.png'; $img = imagecreatefromstring(file_get_contents($bigImgPat ...
- Swift - 给图片添加文字水印(图片上写文字,并可设置位置和样式)
想要给图片添加文字水印或者注释,我们需要实现在UIImage上写字的功能. 1,效果图如下: (在图片左上角和右下角都添加了文字.) 2,为方便使用,我们通过扩展UIImage类来实现添加水印功能 ( ...
- 关于IOS某图片添加控件,图片从相册或拍照保存后,再次进入时点击放大图无法显示的问题
某图片添加控件: https://github.com/XZTLLQ/LQPhotoPickerDemo 问题: 标题已说明 代码块: NSArray *alAssetUrl =(NSMutableA ...
- 使用DW工具给图片添加热点MAP
一.准备一张图片. 准备一张需要给不同区域添加不同热点的图片. 二.插入图片: 打开Dreamweaver,新建一个网页,将图片插入到页面中. 三.找到地图工具: 单击鼠标左键点击图片,这时候 ...
- 使用CSS为图片添加更多趣味的5种方法
使用Photoshop为每个图片添加某种样式虽然可行,但会是相当乏味且困难的长久工作.下面要介绍的CSS技巧将帮助你从痛苦中解脱出来! 阴影效果 通过使用带有一些padding之的背景图来添加阴影效果 ...
- ios图片添加文字或者水印
在项目中,我们会对图片做一些处理,但是我们要记住,一般在客户端做图片处理的数量不宜太多,因为受设备性能的限制,如果批量的处理图片,将会带来交互体验性上的一些问题.首先让我们来看看在图片上添加文字的方法 ...
- 13、在 uwp应用中,给图片添加高斯模糊滤镜效果(一)
如果在应用中,如果想要给app 添加模糊滤镜,可能第一想到的是第三方类库,比如 Win2d.lumia Imaging SDK .WriteableBitmapEx,不可否认,这些类库功能强大,效果也 ...
- Unity3D–Texture图片空间和内存占用分析(转载)
原地址:http://www.unity蛮牛.com/home.php?mod=space&uid=1801&do=blog&id=756 Texture图片空间和内存占用分析 ...
- 利用php给图片添加文字水印--面向对象与面向过程俩种方法的实现
1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image ...
随机推荐
- probuf了解
人们一直在强调,同 XML 相比, Protobuf 的主要优点在于性能高.它以高效的二进制方式存储,比 XML 小 3 到 10 倍,快 20 到 100 倍. 对于这些 “小 3 到 10 倍”, ...
- win7 64位iis发生错误w3wp.exe解决方法
服务器为64的,遇到iis错误w3wp.exe 于是百度,网上说的修改iis权限和修改注册表都不行,后来在msdn上找到解决方法,如下所示 设置iis程序集如下即可
- jquery 实现飘落效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- BDD
Binding business requirements to .NET code http://www.specflow.org/ 行为驱动开发 BDD:Behavior Driven Devel ...
- POJ 3667 & 1823 Hotel (线段树区间合并)
两个题目都是用同一个模板,询问最长的连续未覆盖的区间 . lazy代表是否有人,msum代表区间内最大的连续长度,lsum是从左结点往右的连续长度,rsum是从右结点往左的连续长度. 区间合并很恶心啊 ...
- asp.net mvc异步查询
对于asp.net mvc异步查询 如何做MVC异步查询,做列表页面. 查询是项目中必不可少的工作,而且不同的项目不同的团队,都有自己的简单方法.Asp.net mvc 有自己独特的优势,下面是结合m ...
- ASP.NET MVC页面UI之多级数据选择UI(行业信息、专业信息、职位信息的选择)
多级数据选择操作在开发中是常见的操作,比如选择行业信息时,一般有个大类,每个大类下边又包含很多小类,本文简单实现了弹出窗口一级一级选择功能. 本文博客出处:http://www.kwstu.com/A ...
- Python:Python学习总结
Python:Python学习总结 背景 PHP的$和->让人输入的手疼(PHP确实非常简洁和强大,适合WEB编程),Ruby的#.@.@@也好不到哪里(OO人员最该学习的一门语言). Pyth ...
- TOGAF架构内容框架之内容元模型(下)
TOGAF架构内容框架之内容元模型(下) 2.2 治理扩展(Governance Extensions) 治理扩展元模型内容 治理扩展部分的意图在于引入额外的,并且与支持运营治理的目标和业务服务相关的 ...
- hive 不同用户 权限设置 出错处理
今天安装了hive 在a账号安装的,一切正常 但是到其他账户下,报错 >show tables; Error in metadata: java.lang.RuntimeException: U ...