用jQuery库-

使用.width()和.height()。

更多jQuery宽度和jQuery高度。

示例代码:

$(文档)时函数(){ $("按钮”).click(函数() ｛ alert(”图像的宽度 : " + $("# img_exmpl”).width ()); alert("形象的高度 : " + $("# img_exmpl”).height ()); })； })； < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js " > < /脚本> <img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg"> <button> img显示尺寸</button>

如果你正在使用jQuery并且你正在请求图像大小，你必须等待它们加载，否则你只会得到零。

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

假设，我们想要得到<img id="an-img" src"…" >

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });
})

自然维度

埃尔。naturalWidth和el。naturalHeight会得到图像文件的自然尺寸。

布局尺寸

埃尔。offsetWidth和el。offsetHeight将为我们提供元素在文档上呈现的尺寸。

其他所有人都忘记了的事情是，你不能在加载前检查图像大小。当作者检查所有发布的方法时，它可能只在本地主机上工作。

由于这里可以使用jQuery，请记住'ready'事件是在图像加载之前触发的。$('#xxx').width()和.height()应该在onload事件或以后触发。

Try

函数大小(){ console.log(“宽度:${照片。宽度},高度:$ {pic.height}’); ｝ <img id="pic" src="https://picsum.photos/300/150"> <按钮onclick = "尺寸()“>显示> < /按钮大小

在获取元素的属性之前，文档页面应该是onload的:

window.onload = function(){
    console.log(img.offsetWidth,img.offsetHeight);
}