css 剪辑图片_CSS 截取图片只显示部分图片
在页面中需要在某个位置显示固定长宽的正方形图片,图片中有接近正方形比例但不是正方形,用PHP生成裁剪后的缩略图显然不合适,经过研究发现用CSS可以完美切割图片,经过测试Chrome,FF,IE6-9没问题。css有一个clip属性可以剪切对象,对象position必须为absolute。两张图分别为裁剪前和裁剪后的效果。
这个只是高度大于宽度的情况,如果这一批图片中还有一些宽度大于高度裁剪起来就会有些麻烦,不过经过试验已经完美解决,原理很简单,通过js在图片刚刚开始加载的时刻可以获取其宽度和高度,然后用js决定限制图片的高度还是宽度。如何在图片开始加载时获取大小可以在这里找到。
$(function(){
$('div.icon img').each(function(){
var $this=$(this);
imgReady($this.attr('src'),function(){
if(this.width>this.height){
$this.attr('height','100');
$this.removeAttr('width');
}
});
});
});
css2.0手册中clip的解释
语法:
clip : auto | rect ( number number number number )
取值:
auto : 默认值。对象无剪切
rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切
说明:
检索或设置对象的可视区域。可视区域外的部分是透明的。
此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。
自IE5开始,此属性在MAC平台上可用。
对应的脚本特性为 clip 。
示例:
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
div { position:absolute; width:60px; height:60px; clip:rect(1cm auto 50px 10cm); }
css 剪辑图片_CSS 截取图片只显示部分图片相关推荐
- 成功解决wps文档的论文中插入图片时只显示一半图片(两步教程完美搞定!)
成功解决wps文档的论文中插入图片时只显示一半图片(两步教程完美搞定!) 目录 解决问题 解决思路 解决方法 解决问题 解决wps文档的论文中插入图片时只显示一半图片,如图所示, 解决
- ionic 图片加载失败,显示默认图片代替
1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片.directive("errSrc", f ...
- css 设置背景图一半_img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- php验证码显示碎图片,我的验证码只显示破碎的小图片
源自:2-1 验证码制作 我的验证码只显示破碎的小图片 header("content-type:image/gif"); //通过GD库做验证码 //创建画布 session_s ...
- js中图片加载失败,显示默认图片
js处理img标签加载图片失败,显示默认图片 1.第一种方法: 如果已经引入了jquery插件,就很好办.没有的话,如果实在需要,可以附上代码: $('img').error(function(){$ ...
- 图片加载失败时,显示默认图片
当我们页面中需要加载一些图片时,可能由于网络问题,或者图片文件缺失等问题,导致图片不能正常展示 我们希望有一种降级处理的方式,可以在图片加载失败后显示一张我们预先设定好的默认图片 1.监听图片的 er ...
- vue中当图片地址无效的时候,显示默认图片的方法
1.项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况.这时候,图片就会显示一个叉,或者直接报错,图片裂开,对 ...
- 图片不存在时,显示默认图片
图片不存在时,显示一个默认的图片 <img src="abc.JPG" οnerrοr="this.src='default.JPG'" /> 多张 ...
- linux下通过C语言读取BMP格式图片,在文本终端显示该图片
第一步:打开需要读取的图片文件 fd = open(picture, O_RDONLY): //只读方式打开文件 第二步:读取图片的长,宽,每个像素占多少字节,偏移量 查看bmp格式就能知道各个数据两 ...
最新文章
- actived生命周期_vue生命周期钩子函数actived没有执行
- mongoDB 数据库简介
- jsp,OGNL调用后台Action的某方法
- asp.net mvc 3 RTM 发布了!
- 1021 Deepest Root (25 分) 【难度: 中 / 知识点: 树的直径 连通块】
- NUMERIC_CHECK函数解析
- 【Java】Java实现 JSON 的组装和解析
- 代码审计中的SQL注入
- php Excel 合并单元格
- ceph monitor paxos算法
- Halide 配置 visual studio
- 计算机操作系统教程 2 操作系统概述
- 使电脑显示文件后缀名的俩种方法
- WiFi_WiFi6和WiFi5区别
- 电商详情页设计小程序开发分享,支持微信转发,可用于增加微信转发,提高转化率
- 小白终是踏上了这条不归路----小文的mysql学习笔记(22)--------函数
- python3--数据可视化-爬取赌博聊天室2万5千条聊天记录分析之后发现...
- Android底层驱动开发记录:01_JNI
- 中国智造数据分析,预计2025年中国智能制造市场规模将达5.3万亿元
- watchOS 4 教程(1):开始
热门文章
- 河南理工大学篮球计算机,校青联字〔2013〕14号 关于表彰河南理工大学第十届“理工杯”球类比赛获奖集体及先进个人的决定.doc...
- 视频格式转换方法之264、avi、YUV420P
- [Redis] 使用Redis限制短信发送次数和发送频率
- oracle中over函数
- caffe的docker模型在pycharm中的使用-----笔记
- C#MVC视图获取modle实体类中的参数
- 快速排序算法的递归,迭代法实现(C++)
- C++ 递归算法将输入的字符串倒序输出
- jdk1.8 Switch 不能使用 String类型
- Mysql按月统计数据表中记录数