JS獲取圖片實際寬高及根據(jù)圖片大小進行自適應(yīng)
更新時間：2013年08月11日 18:56:16 作者：
圖片實際寬高使用js進行獲取以及根據(jù)圖片大小進行自適應(yīng)，此功能個人感覺比較實用，在此貢獻出來，希望對大家有所幫助
JS獲取圖片實際寬高，以及根據(jù)圖片大小進行自適應(yīng)
<img src="http://xxx.jpg" id="imgs" onload="adapt();"/>
function adapt(){
var tableWidth = $("#imgTable").width(); //表格寬度
var img = new Image();
img.src =$('#imgs').attr("src") ;
var imgWidth = img.width; //圖片實際寬度
if(imgWidth<tableWidth){
$('#imgs').attr("style","width: auto");
}else{
$('#imgs').attr("style","width: 100%");
}
}
另可設(shè)置CSS樣式：
<style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style>
復(fù)制代碼 代碼如下:
<img src="http://xxx.jpg" id="imgs" onload="adapt();"/>
復(fù)制代碼 代碼如下:
function adapt(){
var tableWidth = $("#imgTable").width(); //表格寬度
var img = new Image();
img.src =$('#imgs').attr("src") ;
var imgWidth = img.width; //圖片實際寬度
if(imgWidth<tableWidth){
$('#imgs').attr("style","width: auto");
}else{
$('#imgs').attr("style","width: 100%");
}
}
另可設(shè)置CSS樣式：
復(fù)制代碼 代碼如下:
<style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style>
相關(guān)文章
交叉觀察器?IntersectionObserver用法詳解
這篇文章主要為大家介紹了交叉觀察器?IntersectionObserver用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
深入理解JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域
匿名函數(shù)沒有實際名字的函數(shù)，匿名函數(shù)(function() {})();是一個特殊的閉包寫法。本文蛀牙給大家介紹JavaScript 中的匿名函數(shù)((function() {})();)與變量的作用域,需要的朋友可以參考下2018-08-08
JavaScript基于DOM操作實現(xiàn)簡單的數(shù)學運算功能示例
這篇文章主要介紹了JavaScript基于DOM操作實現(xiàn)簡單的數(shù)學運算功能,涉及javascript節(jié)點操作、元素遍歷及數(shù)學運算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JavaScript操作表單實例講解(上)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)動態(tài)驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
在前端開發(fā)中,判斷多個請求完畢是一個常見需求,這篇文章主要介紹了前端如何判斷多個請求完畢實戰(zhàn)及常見問題的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03
JavaScript實現(xiàn)99乘法表及隔行變色實例代碼
最近做了個項目是要求實現(xiàn)99乘法表隔行變色，本文給大家分享通過多種方式實現(xiàn)js 99 乘法表，感興趣的朋友一起看看吧2016-02-02
下面小編就為大家分享一篇使用selenium抓取淘寶的商品信息實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
談?wù)凧avaScript中super(props)的重要性
今天小編就為大家分享一篇關(guān)于談?wù)凧avaScript中super(props)的重要性，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-02-02
一文吃透JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理(增刪改查)
在開發(fā)后臺管理系統(tǒng)時，常常會涉及到各種樹狀結(jié)構(gòu)的數(shù)據(jù)處理邏輯，例如：增，刪，改，查等。而樹狀結(jié)構(gòu)的處理就沒有數(shù)組那么的直觀。本文為大家總結(jié)了JS樹狀結(jié)構(gòu)的數(shù)據(jù)處理的方法，需要的可以參考下2022-07-07