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