JQuery加載圖片自適應(yīng)固定大小的DIV
更新時間：2013年09月12日 16:29:19 作者：
在固定大小的div中放置一個圖片，當(dāng)圖片較小時顯示實際大小，當(dāng)圖片超過div大小時圖片 自動適應(yīng)div 的大小，實現(xiàn)思路如下，感興趣的朋友可以了解下
如何在固定大小的div中放置一個圖片，當(dāng)圖片較小時顯示實際大小，當(dāng)圖片超過div 大小時圖片 自動適應(yīng)div 的大小
jquery圖片自適應(yīng)大小實現(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)圖片加載自適應(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>
jquery圖片自適應(yīng)大小實現(xiàn)過程的主要代碼：
代碼如下:
復(fù)制代碼 代碼如下:
.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>
您可能感興趣的文章:
- jQuery延遲加載圖片插件Lazy Load使用指南
- jQuery實現(xiàn)預(yù)加載圖片的方法
- jQuery oLoader實現(xiàn)的加載圖片和頁面效果
- jquery插件lazyload.js延遲加載圖片的使用方法
- jquery中加載圖片自適應(yīng)大小主要實現(xiàn)代碼
- jQuery滾動加載圖片效果的實現(xiàn)
- Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
- jQuery 瀑布流 絕對定位布局（二）(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動布局（一）(延遲AJAX加載圖片)
- jquery動態(tài)加載圖片數(shù)據(jù)練習(xí)代碼
- jQuery 實現(xiàn)圖片的依次加載圖片功能
相關(guān)文章
ElementUI是Vue.js的一套組件庫,其日期時間選擇器默認(rèn)是通過點擊輸入框來觸發(fā),本文介紹了如何自定義觸發(fā)日期選擇器,同時隱藏輸入框,通過編寫一個自定義組件CustomDatePicker.vue,可以實現(xiàn)點擊按鈕來觸發(fā)日期選擇器2024-10-10
Area 區(qū)域?qū)崿F(xiàn)post提交數(shù)據(jù)的js寫法
這篇文章主要介紹了在Area區(qū)域的里 實現(xiàn)post 提交數(shù)據(jù) 的js寫法,需要的朋友可以參考下2014-04-04
本文主要介紹了淺談JavaScript的幾種繼承實現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
HTML+CSS+JavaScript創(chuàng)建一個簡單的井字游戲
使用javascript創(chuàng)建游戲是最有趣的學(xué)習(xí)方式。它會讓你保持動力，這對于學(xué)習(xí)?Web?開發(fā)等復(fù)雜技能至關(guān)重要。本文將使用HTML、CSS和?Javascript創(chuàng)建一個井字游戲。感興趣的童鞋可以關(guān)注一下2021-11-11
下面是JSQL.OnServer() 用到的SQLProxy代理的php版本代碼2010-05-05
彈出層想必大家都有見過吧，本示例介紹的是一個定位至屏幕居中的彈出層，個人感覺效果還不錯，感興趣的朋友可以參考下2014-05-05
這篇文章主要介紹了JS如何獲取對象鍵值對中key值的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
javascript實現(xiàn)對表格元素進(jìn)行排序操作
這篇文章主要介紹了javascript實現(xiàn)對表格元素進(jìn)行排序操作，分別可以實現(xiàn)點擊之后排序和還原，和排升序和降序的功能，文章末尾附完整代碼，感興趣的小伙伴們可以參考一下2015-11-11
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設(shè)計中較為簡單但是最為常用的一種設(shè)計模式。這篇文章主要介紹了Javascript實現(xiàn)單例模式的相關(guān)資料,需要的朋友可以參考下2016-01-01