天天看點

用CSS如何控制網頁中圖檔自适應大小

<script language=JavaScript src="/ad_js.php?n=contentad" mce_src="ad_js.php?n=contentad"></script> <script type=text/javascript> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript mce_src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <script>window.google_render_ad();</script>

圖檔自動适應大小是一個非常常用的功能,在進行制作的時候為了防止圖檔撐開容器而對圖檔的尺寸進行必要的控制,我們可不可以用CSS控制圖檔使它自适應大小呢?

我們想到了一個比較簡單的解決方法,雖然不是非常的完美,如果您的要求不是非常高,已經可以滿足你的需要了。我們看下面的代碼:

以下為引用的内容:

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; 超出的部分隐藏,避免控制圖檔大小失敗而引起的撐開變形。

2.

     放入head裡面  

  <script   language="JavaScript">  

  <!--  

  var   flag=false;  

  function   DrawImage(ImgD){  

        var   image=new   Image();  

        image.src=ImgD.src;  

        if(image.width>0   &&   image.height>0){  

          flag=true;  

          if(image.width/image.height>=   164/112){  

            if(image.width>164){      

            ImgD.width=164;  

            ImgD.height=(image.height*164)/image.width;  

            }else{  

            ImgD.width=image.width;      

            ImgD.height=image.height;  

            }  

            ImgD.alt=image.width+"×"+image.height;  

            }  

          else{  

            if(image.height>112){      

            ImgD.height=112;  

            ImgD.width=(image.width*112)/image.height;            

            }else{  

            ImgD.width=image.width;      

            ImgD.height=image.height;  

            }  

            ImgD.alt=image.width+"×"+image.height;  

            }  

          }  

  }    

  //-->  

  </script>  

  圖檔調用  

  <a   href="<%=trim(rs(" target="_blank" rel="external nofollow" picurl"))%>"   target="_blank"><img   src="<%=trim(rs("imgurl"))%>"     width="164"   height="112"   οnlοad="javascript:DrawImage(this);"></a>  

  這樣可以實作等比例縮放!

繼續閱讀