亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css圖片縮放 通過(guò)css控制圖片自動(dòng)縮放至css定義大小

  發(fā)布時(shí)間：2013-03-28 15:43:49   作者：佚名   我要評(píng)論
瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)碰到圖文并茂的文章,如果圖片的尺寸過(guò)大，常會(huì)把頁(yè)面結(jié)構(gòu)撐得變形直接影響了界面美觀度，一直用DIV+CSS的方式來(lái)制作頁(yè)面，發(fā)現(xiàn)用CSS來(lái)得更方便，相信處理速度也更高
在文章的內(nèi)容區(qū)中，通常會(huì)有圖片。如果圖片的尺寸過(guò)大，常會(huì)把頁(yè)面結(jié)構(gòu)撐得變形。
以前，我采用JS來(lái)控制，效果還是不錯(cuò)。

這段時(shí)間，一直用DIV+CSS的方式來(lái)制作頁(yè)面，發(fā)現(xiàn)用CSS來(lái)得更方便，相信處理速度也更高。
方法如下：
程序代碼

復(fù)制代碼
代碼如下:

<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>

同樣可以用對(duì)高度進(jìn)行控制。
這種方法可以滿足: 一個(gè)頁(yè)面中，不同圖片，超過(guò)所需大小時(shí)，自動(dòng)縮成不同尺寸的需求。
應(yīng)用面也很廣，比如：一般的CMS等文章管理中，通常都有小圖、大圖。而我們?cè)陧?yè)面上，通常需要讀取同一個(gè)圖片，而分不同尺寸顯示。再結(jié)合 overflow:hidden; 相信圖片也就不會(huì)變形了。
程序代碼

復(fù)制代碼
代碼如下:

.pwl_spaceimg{width:160px; height:120px;overflow:hidden; }

.pwl_spaceimg img{width:150px; border:0px; padding:4px; }

首先要講，這個(gè)效果最好用js解決。下面是CSS解決方法：

復(fù)制代碼
代碼如下:

img {
max-width:400px;
_width:expression_r(this.width<400px?"auto":"400px");
}

expression是針對(duì)IE6用的，在FF和IE7+版本max-width就行了

相關(guān)文章

最新評(píng)論