jquery中加載圖片自適應(yīng)大小主要實現(xiàn)代碼

更新時間：2013年08月23日 19:16:56 作者：

當(dāng)圖片較小時顯示實際大小，當(dāng)圖片超過div 大小時圖片自動適應(yīng)div的大小，下面有個示例，大家可以參考下，希望對大家有所幫助

如何在固定大小的div中放置一個圖片，當(dāng)圖片較小時顯示實際大小，當(dāng)圖片超過div 大小時圖片自動適應(yīng)div 的大小
實現(xiàn)過程的主要代碼：

 
.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); 
} 

實例：

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

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/> 
<title>實現(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跨域獲取數(shù)據(jù)的簡單實例
下面小編就為大家?guī)硪黄猨Query使用ajax跨域獲取數(shù)據(jù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jQuery實現(xiàn)的無限級下拉菜單功能示例
這篇文章主要介紹了jQuery實現(xiàn)的無限級下拉菜單,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
jQuery?UI菜單部件Menu?Widget
這篇文章介紹了jQuery?UI菜單部件Menu?Widget，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
jQuery對JSON數(shù)據(jù)進(jìn)行排序輸出的方法
這篇文章主要介紹了jQuery對JSON數(shù)據(jù)進(jìn)行排序輸出的方法,涉及jQuery中g(shù)etJSON與sort等方法的使用技巧,需要的朋友可以參考下
2015-06-06
jQuery示例收集
3D旋轉(zhuǎn)效果展示分享按鈕，具有動畫效果。WordPress的tab云好像也有這種效果。
2010-11-11
利用JQuery動畫制作滑動菜單項效果實現(xiàn)步驟及代碼
滑動菜單項效果,聽起來就是很時尚的一個效果，不過實現(xiàn)起來有些麻煩，還好有本文的出現(xiàn)，可以幫助你解決這個困惑，熱愛特效的你可不要錯過了哈，好了話不多說切入正文
2013-02-02
JQuery的attr 與 val區(qū)別
這篇文章主要介紹了JQuery的attr 與 val區(qū)別的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
jquery點擊展示與隱藏更多內(nèi)容
這篇文章主要為大家詳細(xì)介紹了jquery點擊展示與隱藏更多內(nèi)容的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
jQuery如何封裝輸入框插件
這篇文章主要介紹了jQuer輸入框插件封裝方法，這樣可以提高程序員的開發(fā)效率，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-08-08
Jquery實現(xiàn)獲取子元素的方法分析
這篇文章主要介紹了Jquery實現(xiàn)獲取子元素的方法,結(jié)合實例形式分析了jQuery針對頁面元素的查找、獲取相關(guān)操作技巧,需要的朋友可以參考下
2019-08-08