 
.divImg{ 
max-height:200px; max-width:200px; 
width: expression(this.width > 200 && this.width > this.height ? 200 : auto); 
height: expression(this.height > 200 ? 200 : auto); 
} 

實(shí)例：

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

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/> 
<title>實(shí)現(xiàn)圖片加載自適應(yīng)</title> 
<script type="text/javascript" src="../jquery.min.js"> </script> 
<script type="text/javascript"> 
function clickMe(){ 
var url="../Images/1.jpg"; 
$("#img").attr("src",url); 
$("#img").addClass("divImg"); 
} 
</script> 
<style type="text/css"> 
.divClass { 
border: 1px solid red; 
width: 200px; 
height: 200px; 
} 
.divImg{ 
max-height:200px; max-width:200px; 
width: expression(this.width > 200 && this.width > this.height ? 200 : auto); 
height: expression(this.height > 200 ? 200 : auto); 
} 
</style> 
</head> 
<body> 
<div class="divClass"> 
<img id="img" > </img> 
</div> 
<div> 
<input type="button" id="btn" style="width:50px;height: 30px;border:1px solid blue;" value="btn" onclick="clickMe()"/> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery Ajax之$.get()方法和$.post()方法
load()方法通常用來從Web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，然而這并不能體現(xiàn)Ajax的全部?jī)r(jià)值。在項(xiàng)目中，如果需要傳遞一些參數(shù)給服務(wù)器中的頁面，那么可以使用$.get()或者$.post()方法（或者是后面要講解到的$.ajax方法）。
2009-10-10
基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示
近期有項(xiàng)目需求是這樣的，需要根據(jù)用戶選擇的選項(xiàng)給出相應(yīng)的提示，本文給大家介紹基于jQuery實(shí)現(xiàn)復(fù)選框是否選中進(jìn)行答題提示，對(duì)jquery復(fù)選框是否選中相關(guān)知識(shí)感興趣的朋友一起看看吧
2015-12-12
jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法
這篇文章主要介紹了jQuery表格行上移下移和置頂?shù)膶?shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2015-10-10
基于Jquery的溫度計(jì)動(dòng)畫效果
將代碼一一拷貝到頁面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計(jì)圖有出入，但實(shí)現(xiàn)原理是一樣的，歡迎大家多多交流！
2010-06-06
Jquery 高亮顯示文本中重要的關(guān)鍵字
將要高亮顯示的文字加上<span>段落標(biāo)記， class=”mask”的div 做為遮罩層，使此遮罩層位于文字內(nèi)容之上（z-index屬性，使用Jquery給段落動(dòng)態(tài)添加樣式類。
2009-12-12
簡(jiǎn)單常用的幻燈片播放實(shí)現(xiàn)代碼
幻燈片自動(dòng)播放圖片是當(dāng)前網(wǎng)站比較流行的一個(gè)展示方式，這里項(xiàng)目需要，我自己做了一個(gè)簡(jiǎn)單的，就不詳細(xì)講解了，代碼很簡(jiǎn)單。直接看效果圖和代碼吧，希望對(duì)大家有所幫助
2013-09-09
jquery調(diào)用wcf并展示出數(shù)據(jù)的方法
網(wǎng)上看了很多jquery調(diào)用wcf的例子，可能是主機(jī)的原因，我用的是gd主機(jī)，所以都沒有成功，昨天自己搞了一天，終于成功了，現(xiàn)把方法和代碼和大家分享
2011-07-07
一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子
這篇文章主要介紹了一個(gè)簡(jiǎn)單的jQuery插件ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件例子,需要的朋友可以參考下
2014-06-06
jQuery學(xué)習(xí)筆記之Ajax用法實(shí)例詳解
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之Ajax用法,結(jié)合實(shí)例形式較為詳細(xì)的分析總結(jié)了jQuery中ajax的相關(guān)使用技巧,包括ajax請(qǐng)求、載入、處理、傳遞等,需要的朋友可以參考下
2015-12-12
jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖,可實(shí)現(xiàn)多種關(guān)系的顯示及點(diǎn)擊后漸顯切換效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁面元素顯示效果的相關(guān)技巧,需要的朋友可以參考下
2015-10-10