首頁 > 開發者 > CSS

圖片按比例縮小(css強制）js代碼

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

<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>圖網頁特效代碼</title>

<style>
<!-- ,很多情況下，不用這種方法，會增加ie負荷。-->
.thumbimage {
    max-width: 50px;
    max-height: 50px;
}
* html .thumbimage {
    width: expression(this.width > 50 && this.width > this.height ? 50 : true);
    height: expresion(this.height > 50 ? 50 : true);
}

</style>

</head>

<body>
<img src="/jscss/demoimg/wall3.jpg">
</body>
</html>


雅虎圖片的按比例縮小代碼::


<script type="text/網頁特效">
function setimgsize(img,width,height){
var maxwidth=width;//設定圖片寬度界限
var maxheight=height;//設定圖片高度界限
var heightwidth=img.offsetheight/img.offsetwidth;//設定高寬比
var widthheight=img.offsetwidth/img.offsetheight;//設定寬高比
if(img.offsetwidth>maxwidth){
img.width=maxwidth;
img.height=maxwidth*heightwidth;
}
if(img.offsetheight>maxheight){
img.height=maxheight;
img.width=maxheight*widthheight;
}
}

</script>


使用:<img src="/www.111cn.net/logo-yy.gif" border=0  onload="setimgsize(this,132,160);">

<script language="網頁特效">
<!--
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>= 180/110){
  if(image.width>180){
   imgd.width=180;
   imgd.height=(image.height*110)/image.width;
  }else{
   imgd.width=image.width;
   imgd.height=image.height;
  }
  /*imgd.alt="bigpic" */
}
else{
  if(image.height>110){
   imgd.height=110;
   imgd.width=(image.width*110)/image.height;
  }else{
   imgd.width=image.width;
   imgd.height=image.height;
  }
   /*imgd.alt="bigpic" */
}
}
}
//-->
</script>

<img src="/www.111cn.net/logo-yy.gif" border=0  onload="drawimage(this);">

方法四(css強制）js代碼

<img src="..." alt="..." onload="resizeimage(this)" />
<script type="text/javascript">
function resizeimage(obj) {
    obj.width = obj.width > 50 && obj.width > obj.height ? 50 : auto;
    obj.height = obj.height > 50 ? 50 : auto;
}
</script>

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

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
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