CSS控制網頁中圖片的最大寬度和高度
來源：程序員人生 發布時間：2013-11-22 19:42:31 閱讀次數：3578次
<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 瀏覽器里面這個用法似乎不起作用。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
