html图片缩小属性,CSS属性实现同比例缩小图片
本文向大家描述一下如何使用CSS属性同比例缩小图片,一般情况下如果要把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。
符合Web标准!CSS同比例缩小图片
当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳。
把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。
对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:
Example Source Code
functionresizeImage(obj){
objobj.width=obj.width>50&&obj.width>obj.height?50:auto;
objobj.height=obj.height>50?50:auto;
}
这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。
最终,把一副大图片按比例缩小到50px*50px以内,可以参照以下这段CSS:
Example Source Code
.thumbImage{
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}
至于图片是如何保持其高宽比例的,这张图片可以解释:
【编辑推荐】
【责任编辑:程华权 TEL:(010)68476606】
点赞 0
html图片缩小属性,CSS属性实现同比例缩小图片相关推荐
- html left属性,CSS属性参考 | left
CSS left 属性用来指定被定位元素左侧边缘的位置.该属性定义了被定位元素左侧外边距边界与其包含块元素左侧边界之间的偏移. left是一个偏移属性,偏移属性用于指定一个被定位元素的精确位置,对于s ...
- Dom基础 特殊的节点 获取元素节点的内容 获取元素的属性 css属性 Dom获取元素的方法
1.Dom基础 <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
- html让图片一直旋转,css如何设置不停旋转的图片?
css如何设置不停旋转的图片?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何设置不停旋转的图片? 这个效果实现起来其实并不困难,代码清单如下: ...
- html背景图片在底部,CSS兑现固定DIV层背景图片且底部显示
CSS实现固定DIV层背景图片且底部显示 /*CSS缩写形式*/ div { background:url(/images/about_bg.jpg) no-repeat fixed; backgro ...
- 计算机word缩小表格,word排版 文件等比例缩小 word表格等比例缩小
WORD文件怎么把里面所有内容全部等比例缩小 1.如果是在电脑显示缩小,可以点击格式工具栏的显示比例. 也可以手动输入比例数值. 2.如果是打印时缩小,可在打印时选择"按纸张大小缩放&quo ...
- 压缩图片大小的java代码_java按比例压缩图片的源代码,用java如何把图片处理到指定大小...
[要分析某个网页中的代码构成,需要某个结点下的内容.用此原始方法可以得到整个网页的源码.其实更简单的方法是使用 WebClient 或 HtmlUtil 等开源方式 .public class Ht ...
- android 图片百分比显示,Android编程实现等比例显示图片的方法
本文实例讲述了Android编程实现等比例显示图片的方法.分享给大家供大家参考,具体如下: 在android中,由于密度的影响,如果想得到图片的宽高是不行的,具体为什么我就大概说一下,具体的请搜索度娘 ...
- css所有缩写属性,CSS属性简写整理
<写出高效整洁的css的13条规则>里面有提到要尽量简写css.具体怎么简写呢,总结如下: 盒子的内外边距(margin和padding) 以margin为例,padding相同.盒子有上 ...
- html visibility属性,CSS属性参考 | visibility
CSS visibility 属性用于隐藏一个元素. CSS visibility属性用于隐藏一个元素.当取值为hidden时用于隐藏非表格元素,当取值为collapse时用于隐藏表格行或列. 使用v ...
最新文章
- 介绍三种绘制时间线图的方法
- wangEditor的使用及上传图片(一)
- 个推用户画像的实践与应用
- python安装orm_Python流行ORM框架sqlalchemy安装与使用教程
- Log.isDebugEnabled()使用场景
- xy坐标正负方向_【笛卡尔坐标系】
- 想唱你就唱卡拉ok_如何将电唱机与其他设备连接起来
- [JZOJ P1281] [DP]背包的第k优解
- Entity Framework 6 Recipes 2nd Edition(12-1)译 - 当SaveChanges( ) 被调用时执行你的代码...
- python资料-(转)python资料汇总(建议收藏)零基础必看
- tensorflow 计算梯度: tf.gradient() 与 tf.GradientTape()
- linux等待队列wait_queue_head_t和wait_queue_t
- PNG文件转YUV格式并实现播放
- 深海迷航代码_?《深海迷航(Subnautica)》如何输入代码
- “行走的广告牌”——椰树牌椰汁
- 动森服务器维护什么时候好,仙境传说RO爱如初见7月1日服务器停机维护
- APS系统哪家好(下)
- 怎么用matlab求特征向量,MATLAB用eig()函数求【特征值】【特征向量】【归一化
- Python 常用基础模块(二):os模块
- 删除重复文件的脚本代码
热门文章
- 第一章:一年365天,每天进步1‰,累计进步多少?一年365天,每天退步1‰,累计退步多少?format入门
- DecisionCurve决策曲线分析法
- win10启用或关闭windows功能空白终极解决办法
- 解决电视盒子占用wifi带宽问题
- 一个正整数到 Excel 编号之间的转换
- 深圳海关计算机应用岗位进面分数,这是深圳国税和海关的进面分数线,看完你还敢报吗?...
- 魔兽世界az端和TC端有什么区别 Mangos,TC,SW,AZ,AC的关系
- Android开发随手记录
- ftp服务器搭建随手记
- altium designer自动布线设置GND或其他网络不布线的方法