jq獲取圖片的原始尺寸，自適應布局
阿新 • • 發佈：2017-09-09
-c ati blog jquer use abs load 圖片 rom
原理： each（）遍歷，width（）、height（）獲取寬高， load（）
註意：
由於頁面加載完了，但圖片不一定加載完了，所以直接通過 $("img").width()，$("img").height() 是無法穩定獲取到img的準確尺寸，或為0，或偶爾為0；
解決方法： load（），元素加載完了之後執行；
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片自適應</title>
<script src=‘./js/jquery-1.9.0.min.js‘></script>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
* {
margin: 0;
padding: 0;
}
img {
display: inline-block;
}
.autoImg {
width: 50px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
margin: 3px;
}
/*固定寬 高自適應 全鋪滿*/
.auto_img_Width {
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
/*固定高 寬自適應 全鋪滿*/
.auto_img_Height {
position: absolute;
top: 0;
left: 50%;
width: auto;
height: 100%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="autoImg">
<img src="./img/[email protected]" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/bg.jpg" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/img1.png" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/[email protected]" class=‘auto_img‘>
</div>
<div class="autoImg">
<img src="./img/img2.png" class=‘auto_img‘>
</div>
</body>
<script>
function imgAuto ( obj ) {
if( $(obj).width() <= $(obj).height() ) {
$(obj).addClass(‘auto_img_Width‘);
} else {
$(obj).addClass(‘auto_img_Height‘);
}
}
$(function () {
$(‘.auto_img‘).each(function () {
$(this).load(function () {
console.log( $(this).width() +‘:‘+ $(this).height());
imgAuto(this);
})
})
})
</script>
</html>
圖片原始圖： 
效果圖： 
缺點： 丟失了圖片的部分邊角； 優點： 保持了圖片的比例，不變形
jq獲取圖片的原始尺寸，自適應布局