给大家带来切合Web尺度!CSS同比例减少图片

只看该作者 · 发表于 2015-1-16 00:14:25

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

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

x

那么什么是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);
　　}
　　
至于图片是怎样坚持其高宽比例的，这张图片能够注释：