1. 程式人生 > >CSS控制圖片大小不變形

CSS控制圖片大小不變形

1.(不錯,我正在用)

img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

設定最大寬度是630px 如果大於630就把圖片寬度設定為630 高度就會隨著比例也會縮小 不會造成圖片變形

2.

img,a img{

border:0;

margin:0;

padding:0;

max-width:590px;

width:e­xpression(this.width>590?"590px":this.width);

max-height:590px;

height:e­xpression(this.height>590?"590px":this.height);

}

3.

div img {

max-width:600px;

width:600px;

width:expression(document.body.clientWidth>600?”600px”:”auto”);

overflow:hidden;

}

max-width:600px; 在IE7、FF等其他非IE瀏覽器下最大寬度為600px。但在IE6中無效。

width:600px; 在所有瀏覽器中圖片的大小為600px;

當圖片大小大於600px,自動縮小為600px。在IE6中有效。

overflow:hidden; 超出的部分隱藏,避免控制圖片大小失敗而引起的撐開變形。

4.

如果想設定圖片的高度和寬度都不超過某一個固定值,就需要在圖片高度或寬度超過這個值的時候,讓圖片按比例縮小到這個尺寸。

1,對於現代瀏覽器,比如Firefox或是IE7及以上,直接使用max-width和max-height兩條CSS屬性即可。

2,對於IE 6.0及以下版本,以上兩條CSS屬性均不會被理會。之前處理這種事情,我們往往會藉助Javascript,然後為圖片加上onload事件。例如:

<imgsrc="..."alt="..."onload="resizeImage(this)"/>

<script type="text/javascript">

  functionresizeImage(obj){

  obj.width=obj.width>50&&obj.width>obj.height?50:auto;

  obj.height=obj.height>50?50:auto;

  }

</script>