在文章的內容區中,通常會有圖片。如果圖片的尺寸過大,常會把頁面結構撐得變形。
以前,我采用JS來控制,效果還是不錯。
這段時間,一直用DIV+CSS的方式來制作頁面,發現用CSS來得更方便,相信處理速度也更高。
方法如下:
程序代碼
<div class=”UBBPanel”>
<div class=”UBBTitle”>
<img src=”images/code.gif” style=”margin:0px 2px -3px 0px” alt=”程序代碼”/> 程序代碼</div>
<div class=”UBBContent”>.new_body .con img{vertical-align: middle;max-width: 630px; width: expression(this.width >630 && this.height < this.width ? 630: true); }
</div></div>
同樣可以用對高度進行控制。
這種方法可以滿足: 一個頁面中,不同圖片,超過所需大小時,自動縮成不同尺寸的需求。
應用面也很廣,比如:一般的CMS等文章管理中,通常都有小圖、大圖。而我們在頁面上,通常需要讀取同一個圖片,而分不同尺寸顯示。再結合 overflow:hidden; 相信圖片也就不會變形了。
程序代碼
.pwl_spaceimg{width:160px; height:120px;overflow:hidden; }
.pwl_spaceimg img{width:150px; border:0px; padding:4px; }
首先要講,這個效果最好用js解決。下面是CSS解決方法:
復制代碼代碼如下:
img {
max-width:400px;
_width:expression_r(this.width<400px?”auto”:”400px”);
}
expression是針對IE6用的,在FF和IE7+版本max-width就行了
新聞熱點
疑難解答