首頁 > 開發者 > CSS

CSS使映像等比例縮放相容IE6、IE7、FF

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

因為想給黃岐生活資訊網的論壇加圖片上傳功能，但又不想使用組件來控製圖片上傳後的大小，因此就採用了CSS來控制，尋找了半天，最開始找到的是：

CSS控製圖片縮放1
<style type="text/css">
.thumbImage{ 
　　max-width:300px; 
　　max-height:200px; 
　　} 
　　*html.thumbImage{ 
　　width:expression(this.width>300&&this.width>this.height?300:auto); 
　　height:expresion(this.height>200?200:auto); 
　　}
</style>

在圖片調用中調用該CSS樣式
------------------------------------------
<img src="圖片檔案地址" class="thumbImage" />

 

結果不行，於是再找，找到一個：

CSS控製圖片縮放2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<script type="text/javascript">
function ResumeError() { return true; } 
window.onerror = ResumeError; //屏蔽JS錯誤，這樣狀態列就不會顯示“網站上有錯誤了”
</script>

<style type="text/css" >
.album-pic-list img { 
vertical-align: middle; 
max-width:100px;   /* FF IE7 */
max-height:100px; /* FF IE7 */
_width:expression(this.width > 100 && this.width > this.height ? 100: auto); /* IE6 */
_height:expression(this.height > 100 ? 100 : auto); /* IE6 */ 
}

</style>

</head>

<body>
<div class="album-pic-list">
   <img src="pic/pic_03.jpg" />
   <img src="pic/lo2.jpg" />   
</div>
</body>
</html>

 

但是會提示auto未定義？起先我並沒有把那個屏蔽JS錯誤的JS放上去，所以會提示，後來放上去，結果IE好像Down了。

不過根據這個例子中的相容提示，我再添加關鍵詞“IE6”搜尋，終於找到了一個比較滿意的

http://bbs.80nian.net/viewthread.php?tid=154

 

CSS控製圖片縮放
<script language="javascript" type="text/javascript">
<!--
function ImgAuto(i){//你必須給圖片提前設定初始寬度和高度，建議直接就是最大寬度和高度
var MaxW=250;        //定義圖片顯示的最大寬度
var MaxH=250;        //定義圖片顯示的最大高度
var o=new Image();o.src=i.src;var w=o.width;var h=o.height;var t;if (w>MaxW){t=MaxW;}else{t=w;}
if ((h*t/w)>MaxH){i.height=MaxH;i.width=MaxH/h*w;}else{i.width=t;i.height=t/w*h;}
}
-->
</script>
<img src="http://bbs.tnbz.com/attachments/forumid_42/XP_IuSTD0jh5sSb.jpg" width="250" height="250" onload="ImgAuto(this)">

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
test ie6 ps4 ff ie7 download update ie7 ff 3ds ff channel ff patcher
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More