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