<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 浏览器里面这个用法似乎不起作用。 总结
以上是内存溢出为你收集整理的CSS控制网页中图片的最大宽度和高度全部内容，希望文章能够帮你解决CSS控制网页中图片的最大宽度和高度所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）