CSS节制网页中图片的最大宽度和高度
发布时间:2018-10-10 02:26:52 所属栏目:创业 来源:站长网
导读:html head style type=text/css !-- img.pic{ max-width:300; max-height:100px; /*因为IE6.0以及早年版本的IE不支持上边两个属性,以是加上以下两条语句.这里要声名的是expression只有IE支持*/ width: expression(this.width 300 this.width / 300 = this.h
<html> <head> <style type="text/css"> <!-- img.pic{ max-width:300; max-height:100px; /*因为IE6.0以及早年版本的IE不支持上边两个属性,以是加上以下两条语句.这里要声名的是expression只有IE支持*/ width: expression(this.width > 300 && this.width / 300 >= this.height / 100 ? 300 : true); height: expression(this.height > 100 && this.width / 300 < this.height / 100 ? 100 : true); } //--> </style> </head> <body> <div id="pic"> </div> <img class="pic" src="Blue hills.jpg" /> </body> </html> 因为上边的代码中,配置最大的长宽是直接用数字的,这样再修改的时辰异常不利便,以是做了以下修改: <html> <head> <script type="text/javascript"> <!-- Object.MAX_WIDTH = 400; Object.MAX_HEIGHT = 300; --> </script> <style type="text/css"> <!-- img.pic{ max-width:300px; max-height:100px; width: expression(this.width > Object.MAX_WIDTH && this.width / Object.MAX_WIDTH >= this.height / Object.MAX_HEIGHT ? Object.MAX_WIDTH : true); height: expression(this.height > Object.MAX_HEIGHT && this.width / Object.MAX_WIDTH < this.height / Object.MAX_HEIGHT ? Object.MAX_HEIGHT : true); } //--> </style> </head> <body> <div id="pic"> </div> <img class="pic" src="Blue hills.jpg" /> </body> </html> 这样的话,只必要修改Object.MAX_WIDTH和Object.MAX_HEIGHT这两个类变量就可以很利便的修改最大的长宽. 持续的字母或其他非凡字符导致不能自动换行,办理的步伐是行使如下要领 着实 CSS 内里有一个 style,叫做 word-wrap。把它设为 break-word,然后把单位格宽度定一下,就没有须要在措施内里举办换行了。如下所示。 table style="table-layout: fixed; word-break: break-all; word-wrap: break-word; overflow-x: hidden" width="500" 不外留意,在 Mozilla 赏识器内里这个用法好像不起浸染。 (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |