關(guān)于jquery 如何自動調(diào)整某個div中的圖片大小

jQuery調(diào)整html對象使用css()方法即可.

創(chuàng)新互聯(lián)公司專注于中大型企業(yè)的成都做網(wǎng)站、網(wǎng)站設(shè)計和網(wǎng)站改版、網(wǎng)站營銷服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開發(fā)的融合，累計客戶上千余家，服務(wù)滿意度達(dá)97%。幫助廣大客戶順利對接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開發(fā)，在前進(jìn)的路上，與客戶一起成長！

$("#test img").css("width","30px")//設(shè)置test下的圖片寬為30px

$("#test img").css("height","30px")//設(shè)置test下的圖片高為30px

定義和用法：

css() 方法返回或設(shè)置匹配的元素的一個或多個樣式屬性.

設(shè)置 CSS 屬性

設(shè)置所有匹配元素的指定 CSS 屬性.

$(selector).css(name,value)

通俗的解釋為如果設(shè)置第二個參數(shù)為修改css屬性，如果未設(shè)置第二個參數(shù)為獲取css屬性.

jquery 如何讓圖片自適應(yīng)大小

script type="text/javascript" src="js/jquery.min.js"/script

script type="text/javascript"

jQuery.fn.LoadImage=function(scaling,width,height,loadpic){

if(loadpic==null)loadpic="../img/loading.gif";

return this.each(function(){

var t=$(this);

var src=$(this).attr("src")

var img=new Image();

img.src=src;

//自動縮放圖片

var autoScaling=function(){

if(scaling){

if(img.width0 img.height0){

if(img.width/img.height=width/height){

if(img.widthwidth){

t.width(width);

t.height((img.height*width)/img.width);

}else{

t.width(img.width);

t.height(img.height);

}

}

else{

if(img.heightheight){

t.height(height);

t.width((img.width*height)/img.height);

}else{

t.width(img.width);

t.height(img.height);

}

}

}

}

}

//處理ff下會自動讀取緩存圖片

if(img.complete){

autoScaling();

return;

}

$(this).attr("src","");

var loading=$("img alt=\"加載中...\" title=\"圖片加載中...\" src=\""+loadpic+"\" /");

t.hide();

t.after(loading);

$(img).load(function(){

autoScaling();

loading.remove();

t.attr("src",this.src);

t.show();

});

} );

}

/script

div id="content"img src="img/20120518073933709.jpg"http://div

script type="text/javascript"

!--

$(window).load(function(){

$('#content img').LoadImage(true, 600,500,'img/loading.gif');

});

//--

/script

怎么用js實現(xiàn)圖片的縮小？

一般來說，實現(xiàn)圖片的放大縮小功能都用到了比較大的封裝插件，特別是以jQuery插件居多，而實際上單純實現(xiàn)對原圖本身的放大縮小，用簡單幾行原生JS代碼就可以做到。在今天分享的這個實例中，點(diǎn)擊放大按鈕不松鼠標(biāo)，圖片會不斷的逐漸放大，當(dāng)然也可以點(diǎn)一下放大一點(diǎn)，點(diǎn)擊縮小按鈕則反之，有需要的朋友可以考慮收藏備用哦

以下為全部代碼：

html

head

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/

titlejavascript控制圖片縮小或者放大/title

/head

body

script?type="text/javascript"

var?oTime;

function?changeSize(id,action){

var?obj=document.getElementById(id);

obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';

oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100);

}

document.onmouseup=function(){

window.clearTimeout(oTime);

}

/script

div?style="height:350px;?overflow:?auto;"

img?id="headImg"?src="

button?onmousedown="changeSize('headImg','+');"?onmouseup="window.clearTimeout(oTime);"放大/button

button?onmousedown="changeSize('headImg','-');"?onmouseup="window.clearTimeout(oTime);"縮小/button

/body

/html

jquery 圖片的寬為可視窗口的寬 等比縮放如何計算出圖片的高

代碼如下：

$(document).ready(function(){

//?先取得原圖片大小，圖片加載時獲取

$("#IMG").load(function(){

_imgW?=?this.width;

_imgH?=?this.height;

//?alert(_imgW);

//?alert(_imgH);

ImgResize();

});

});

function?ImgResize(){

//?再取得可視窗口的寬

var?WT?=?$(window).width();

//?按照寬高比算出調(diào)整后圖片的高度

var?resizeH?=?(WT?*?_imgH)?/?_imgW;

//?將新的尺寸賦予圖片

$("#IMG").css({width:WT,height:resizeH});

}

//?瀏覽器調(diào)整窗口大小時重新計算

$(window).resize(function(){

ImgResize()

});

jquery怎么整體放大縮小div,里面有圖片文字,需要修改寬高的值，不是scale

var div = $("div");

div.css("lfet",value);

div.css("top",value)

....同理

div.width(200) // 同樣也可以用上述css方式來實現(xiàn)。 div.css("width",value); height跟width一樣。

jquery怎么設(shè)置圖片的大小

$(document).ready(function() { $('.post img').each(function() { var maxWidth = 100; // 圖片最大寬度 var maxHeight = 100; // 圖片最大高度 var ratio = 0; // 縮放比例 var width = $(this).width(); // 圖片實際寬度 var height = $(this).height(); // 圖片實際高度 // 檢查圖片是否超寬 if(width maxWidth){ ratio = maxWidth / width; // 計算縮放比例 $(this).css("width", maxWidth); // 設(shè)定實際顯示寬度 height = height * ratio; // 計算等比例縮放后的高度 $(this).css("height", height); // 設(shè)定等比例縮放后的高度 } // 檢查圖片是否超高 if(height maxHeight){ ratio = maxHeight / height; // 計算縮放比例 $(this).css("height", maxHeight); // 設(shè)定實際顯示高度 width = width * ratio; // 計算等比例縮放后的高度 $(this).css("width", width * ratio); // 設(shè)定等比例縮放后的高度 } }); });

網(wǎng)站題目：jquery圖片縮放,jquery設(shè)置圖片大小
網(wǎng)頁網(wǎng)址：http://chinadenli.net/article17/dsighdj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、外貿(mào)建站、搜索引擎優(yōu)化、網(wǎng)站營銷、營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)