jquery中加載圖片自適應大小主要實現(xiàn)代碼
更新時間：2013年08月23日 19:16:56 作者：
當圖片較小時顯示實際大小，當圖片超過div 大小時圖片自動適應div的大小，下面有個示例，大家可以參考下，希望對大家有所幫助
如何在固定大小的div中放置一個圖片，當圖片較小時顯示實際大小，當圖片超過div 大小時圖片 自動適應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);
}
實例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>
<title>實現(xiàn)圖片加載自適應</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>
實現(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);
}
實例：
復制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>
<title>實現(xiàn)圖片加載自適應</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>
您可能感興趣的文章:
- jQuery延遲加載圖片插件Lazy Load使用指南
- jQuery實現(xiàn)預加載圖片的方法
- jQuery oLoader實現(xiàn)的加載圖片和頁面效果
- jquery插件lazyload.js延遲加載圖片的使用方法
- JQuery加載圖片自適應固定大小的DIV
- jQuery滾動加載圖片效果的實現(xiàn)
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- jQuery 瀑布流 絕對定位布局（二）(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動布局（一）(延遲AJAX加載圖片)
- jquery動態(tài)加載圖片數(shù)據(jù)練習代碼
- jQuery 實現(xiàn)圖片的依次加載圖片功能
相關文章
jQuery使用ajax跨域獲取數(shù)據(jù)的簡單實例
下面小編就為大家?guī)硪黄猨Query使用ajax跨域獲取數(shù)據(jù)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了jQuery實現(xiàn)的無限級下拉菜單,涉及jQuery事件響應及頁面元素屬性動態(tài)變換相關操作技巧,需要的朋友可以參考下2016-09-09
這篇文章介紹了jQuery?UI菜單部件Menu?Widget，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
jQuery對JSON數(shù)據(jù)進行排序輸出的方法
這篇文章主要介紹了jQuery對JSON數(shù)據(jù)進行排序輸出的方法,涉及jQuery中getJSON與sort等方法的使用技巧,需要的朋友可以參考下2015-06-06
3D旋轉效果展示分享按鈕，具有動畫效果。WordPress的tab云好像也有這種效果。2010-11-11
利用JQuery動畫制作滑動菜單項效果實現(xiàn)步驟及代碼
滑動菜單項效果,聽起來就是很時尚的一個效果，不過實現(xiàn)起來有些麻煩，還好有本文的出現(xiàn)，可以幫助你解決這個困惑，熱愛特效的你可不要錯過了哈，好了話不多說切入正文2013-02-02
這篇文章主要介紹了JQuery的attr 與 val區(qū)別的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了jquery點擊展示與隱藏更多內容的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了jQuer輸入框插件封裝方法，這樣可以提高程序員的開發(fā)效率，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了Jquery實現(xiàn)獲取子元素的方法,結合實例形式分析了jQuery針對頁面元素的查找、獲取相關操作技巧,需要的朋友可以參考下2019-08-08