jQuery實現(xiàn)按比例縮放圖片的方法
更新時間：2017年04月29日 12:01:36 作者：lxdcyh
這篇文章主要介紹了jQuery實現(xiàn)按比例縮放圖片的方法,涉及jQuery針對頁面元素的獲取、屬性運算、設置等相關操作技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)按比例縮放圖片的方法。分享給大家供大家參考，具體如下：
做網站的時候，相信有很多朋友都會遇到圖片過大，導致頁面撐開變形的問題，如果強制設置width，height，圖片則會因為強制變形而走樣。在這里我介紹一種簡單的按比例縮放圖片的方法。
對于一堆圖片
<img src="1.jpg" border="1"></img> <img src="2.jpg" border="1"></img>
應用下面的JavaScript代碼
<SCRIPT LANGUAGE="JavaScript">
function setImg(img,width,height){
var scale_w=img.width/width;
var scale_h=img.height/height;
var scale=scale_w>scale_h?scale_w:scale_h;
img.width=img.width/scale;
return false;
}
</SCRIPT>
然后使用如下的jQuery語句即可
<script type="text/javascript">
$(document).ready(function(){
$("img").each(function(){
setImg(this,200,200);
});
});
</script>
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了EasyUI折疊表格層次顯示detailview詳解及實例,非常不錯，具有參考借鑒價值，需要的朋友參考下吧2016-12-12
下面小編就為大家分享一篇jquery animate動畫持續(xù)運動的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
jquery.fileEveryWhere.js 一個跨瀏覽器的file顯示插件
大牛ppk都說過，在從多表單控件中，上傳文件控件的樣式是最難以控制的。見文章Styling an input type="file"。本插件也多是參考此文2011-10-10
這篇文章主要介紹了Jquery1.9.1源碼分析系列（十五）動畫處理之外篇 的相關資料,需要的朋友可以參考下2015-12-12
本篇文章主要介紹了基于JQuery的購物車添加刪除以及結算功能示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要為大家詳細介紹了JQuery核心函數(shù)是什么，及使用方法介紹，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了jquery的ajax簡單結構,需要的朋友可以參考下2014-02-02
淺談jQuery中對象遍歷.eq().first().last().slice()方法
本文給大家分析了jQuery中的對象遍歷.eq().first().last().slice()方法的使用，以及他們之間的區(qū)別，jQuery源碼中的使用。2014-11-11
在Web開發(fā)中，經常會涉及到文件上傳。文件上傳時通常都要驗證文件的有效性，這個通常就要用正則表達式來判斷。2015-05-05
存儲的是被拖動的圖片的初始坐標，為兩個變量設置被拖動圖片的初始坐標，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05