如果我們頁面看到的圖片都是縮略圖，那就需要做個圖片點擊放大效果，那麼怎樣獲取圖片的原始寬高呢？方法如下：
//獲取圖片原始寬度
function getNaturalWidthAndHeight(img) {
var image = new Image();
image.src = img.src;
return [image.width,image.height];
}
//點擊縮略圖彈出層，顯示原始圖片。
//獲取class為tz_main_box下的所有p標簽下的圖片img
$(".tz_main_box p>img").each(function (k, v) {
$(this).unbind("click"); //解除綁定，防止彈出多次圖片層。
$(this).click(function () {
var img = v; //圖片對象
var imgArea = getNaturalWidthAndHeight(img);
var layerWidth = imgArea[0]+ 5;
if (layerWidth > 1080) {
layerWidth = 1080;
}
var layerHeight = imgArea[1] + 5;
if (layerHeight > 600) {
layerHeight = 600;
}
//layer彈出層插件
layer.open({
type: 1,
title: false,
closeBtn: 0,
area: [''+layerWidth+'px', '' + layerHeight + 'px'],
skin: 'layui-layer-nobg', //沒有背景色
shadeClose: true,
closeBtn: 1, //顯示關閉按鈕
content: "<center><img src='" + $(this).attr("src") + "'></center>"
});
});
});
以上這篇Js獲取圖片原始寬高的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。