最近在接到一个需求是：在移动端上，判断图片的大小，如果图片的宽度大于设备的宽度，就将图片的宽度设置为设备的宽。如果图片的宽度小于设备的宽度，就让图片保持自身的大小。
我的思路是：先获取到设备屏幕的大小，然后再获取到图片的真实宽、高，最后将图片的宽和设备的宽做对比，进行样式的处理。
$(function () {
function BgImg(){
let w = $(window).width();
let picObj = $(".a-deCont p img")
let ImgW = picObj.width();
let ImgH = picObj.height();
if (ImgW > w) {
picObj.css({
"display": 'block',
"width": "100%",
})
} else {
picObj.css({
"width": ImgW,
"height": ImgH
});
}
}
BgImg();
})写完之后，我发现一个问题，获取到的图片宽度并不是图片真正的宽度，是浏览器自行设置好的宽，后来在朋友阿伍的帮助下，我发现这个问题是因为引入了reset.css文件导致的，其中有一个是 img{ width:100%; height :auto; }
在这行代码的作用，获取到的图片宽并不是图片自身实际的宽。于是就换了一种方式，用 new Image() 这种方式来获取到图片的真实宽。
$(function () {
function BgImg(){
let w = $(window).width();
let ImgObj = new Image();
let picObj = $(".a-deCont p img")
ImgObj.src = picObj.attr("src")
let ImgW = ImgObj.width;
let ImgH = ImgObj.height;
if (ImgW > w) {
picObj.css({
"display": 'block',
"width": "100%",
})
} else {
picObj.css({
"width": ImgW,
"height": ImgH
});
}
}
BgImg();
})这样就获取到了图片真实的宽高，完成后在本地测试没什么问题，不过在上线后出现了一个小bug，就是页面在首次载入时，图片就会消失，只有刷新后图片才会显示出来，一开始以为是图片没有挂载到页面上，先是打开F12，看到在页面首次载入时，图片挂载到页面中了。
纠结了好久后，发现页面首次载入时，图片的width、height都为0，在查了相关资料后，知道浏览器对于JS异步运行非常快，当载入ImgObj.src = picObj.attr("src")的时候，浏览器已经开始运行 let ImgW = ImgObj.width;了，这与DOM无关，完全是JavaScript和浏览器的问题。
如果图片不是通过js创建的，而是在页面上本来就存在的，也会出现这个问题，我就是这个情况，最后使用了img.onload才解决了这个问题
$(function () {
function BgImg() {
let w = $(window).width();
let ImgObj = new Image();
let picObj = $(".a-deCont p img")
ImgObj.src = picObj.attr("src")
ImgObj.onload = function(){
let ImgW = ImgObj.width;
let ImgH = ImgObj.height;
if (ImgW > w) {
picObj.css({
"display": 'block',
"width": "100%",
})
} else {
picObj.css({
"width": ImgW,
"height": ImgH
});
}
}
}
BgImg()
})而后在线上测试成功。哈哈哈哈哈哈，算是解决了这个小bug。文中如果有需要改进的地方，还望各位大佬能够指正出来，这样我也可以在各位大佬的帮助下继续学习和完善自己，谢谢大家！
