仓酷云
标题:
给大家带来切合Web尺度!CSS同比例减少图片
[打印本页]
作者:
若相依
时间:
2015-1-16 00:14
标题:
给大家带来切合Web尺度!CSS同比例减少图片
那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
固然,天生缩略图这个事情假如交给程序来完成,效果会好良多,可是偶然出于某种要素,比方服务器不撑持GD之类的,不免就要请CSS代庖。
把一副年夜图片按比例减少到某个尺寸,关于古代扫瞄器,间接利用max-width和max-height两条CSS属性便可。
关于IE6.0及以下版本,以上两条CSS属性均不会被剖析。之前处置这类事变,我们常常会借助Javascript,然后为图片加上onload事务。比方:
ExampleSourceCode
<imgsrc="..."alt="..."/>
<scripttype="text/javascript">
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
</script>
这当然能办理成绩,可是对今后页面的晋级会带来贫苦――跟着扫瞄器对CSS撑持的完美,我们早晚会把图片上的onload事务一切往除。该是Expression的ShowTime了,既然IE撑持经由过程Expression在CSS中安排一些剧本,而这段剧本又只是供应给IE6.0及以下版本利用,那末把它写到Expression中再符合不外。
终极,把一副年夜图片按比例减少到50px*50px之内,能够参照以下这段CSS:
ExampleSourceCode
.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);
}
至于图片是怎样坚持其高宽比例的,这张图片能够注释:
登录/注册后可看大图
2008062021510236.gif
(21.13 KB, 下载次数: 3)
下载附件
保存到相册
给大家带来切合Web尺度!CSS同比例减少图片
2015-1-16 00:14 上传
</p>
表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
作者:
小妖女
时间:
2015-1-18 05:45
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
作者:
admin
时间:
2015-1-24 17:15
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
作者:
深爱那片海
时间:
2015-2-2 12:40
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器,在编辑时能同时看到源码和设计界面,非常方便新手学习制作网页。
作者:
小魔女
时间:
2015-2-7 20:34
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中,我总结了四大定律:兴趣、恒心、虚心、时间。
作者:
仓酷云
时间:
2015-2-23 11:37
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
作者:
灵魂腐蚀
时间:
2015-3-7 08:59
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者:
精灵巫婆
时间:
2015-3-14 21:23
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
作者:
山那边是海
时间:
2015-3-21 16:28
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2