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