仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 739|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:使用CSS按比例减少图片

[复制链接]
萌萌妈妈 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:14:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处?
固然,天生缩略图这个事情假如交给程序来完成,效果会好良多,可是偶然出于某种要素,比方服务器不撑持GD之类的,不免就要请CSS代庖。
把一副年夜图片按比例减少到某个尺寸,关于古代扫瞄器,间接利用max-width和max-height两条CSS属性便可。
关于IE6.0及以下版本,以上两条CSS属性均不会被剖析。之前处置这类事变,我们常常会借助Javascript,然后为图片加上onload事务。比方:
<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:
.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);
}
至于图片是怎样坚持其高宽比例的,这张图片能够注释:


样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。
冷月葬花魂 该用户已被删除
沙发
发表于 2015-1-18 05:46:49 | 只看该作者
AdobeDreamweaverCS5软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的AdobeCSLive在线服务AdobeBrowserLab集成。
爱飞 该用户已被删除
板凳
发表于 2015-1-25 07:33:59 来自手机 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
愤怒的大鸟 该用户已被删除
地板
发表于 2015-2-2 19:02:26 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
乐观 该用户已被删除
5#
发表于 2015-2-8 05:28:55 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
兰色精灵 该用户已被删除
6#
发表于 2015-2-24 17:59:09 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
透明 该用户已被删除
7#
发表于 2015-3-7 13:37:13 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
柔情似水 该用户已被删除
8#
发表于 2015-3-15 07:33:09 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
蒙在股里 该用户已被删除
9#
发表于 2015-3-22 00:05:24 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 22:21

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表