JS獲取圖片實際寬高及根據圖片大小進行自適應
更新時間：2013年08月11日 18:56:16 作者：
圖片實際寬高使用js進行獲取以及根據圖片大小進行自適應，此功能個人感覺比較實用，在此貢獻出來，希望對大家有所幫助
JS獲取圖片實際寬高，以及根據圖片大小進行自適應
<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%");
}
}
另可設置CSS樣式：
<style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style>
復制代碼 代碼如下:
<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%");
}
}
另可設置CSS樣式：
復制代碼 代碼如下:
<style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style>
相關文章
用兩個感嘆號的作用就在于，如果明確設置了o中flag的值（非null/undefined/0""/等值），自然test就會取跟o.flag一樣的值；如果沒有設置，test就會默認為false，而不是null或undefined2011-12-12
今天小編就為大家分享一篇Layui實現數據表格默認全部顯示(不要分頁)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
TypeScript泛型參數默認類型和新的strict編譯選項
這篇文章主要介紹了TypeScript泛型參數默認類型和新的strict編譯選項，對TypeScript感興趣的同學，可以參考下2021-05-05
在進行微信公眾賬號開發(fā)的時候，需要知道當前的瀏覽器是微信內置的瀏覽器，那么如何判斷呢？這是就只有通過瀏覽器的User Agent來進行判斷了2014-09-09
這篇文章主要為大家詳細介紹了Bootstrap表單的簡單實現代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本篇文章主要介紹了js驗證電話號碼與手機支持+86的正則表達式。需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了js拆分字符串并將分割的數據放到數組中的方法,涉及javascript中split方法及數組的操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了BootstrapValidator超詳細教程(推薦)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12
JavaScript中prompt()函數的用法實戰(zhàn)例子
JavaScript中的prompt是一個函數,用于在瀏覽器中顯示一個對話框,提示用戶輸入一些信息,這篇文章主要給大家介紹了關于JavaScript中prompt()函數的用法實戰(zhàn),需要的朋友可以參考下2023-11-11
最近有個需求,是需要生成32位長度的隨機數,下面這篇文章主要給大家介紹了關于前端開發(fā)之JS生成32位隨機數的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01