是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
Try
函数大小(){ console.log(“宽度:${照片。宽度},高度:$ {pic.height}’); } <img id="pic" src="https://picsum.photos/300/150"> <按钮onclick = "尺寸()“>显示> < /按钮大小
其他回答
要得到自然的高度和宽度:
.naturalHeight document.querySelector (img); .naturalWidth document.querySelector (img); < img src = " img.png " >
如果你想获取样式的高度和宽度:
document.querySelector(“img”).offsetHeight; document.querySelector(“img”).offsetWidth;
使用jQuery,你可以这样做:
var imgWidth = $("#imgIDWhatever").width();
我对jQuery的看法
免责声明:这并不一定能回答这个问题,但可以拓宽我们的能力。它在jQuery 3.3.1中进行了测试
让我们考虑一下:
你有图像的URL/路径,你想要得到图像的宽度和高度,而不是在DOM上渲染它, 在DOM上呈现图像之前,您需要将offsetParent节点或图像div包装器元素设置为图像的宽度和高度,以便为不同的图像大小创建一个流体包装器,即,当单击按钮以查看模式/灯箱上的图像时
我要这样做:
// image path
const imageUrl = '/path/to/your/image.jpg'
// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
const realWidth = this.width;
const realHeight = this.height;
alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})
这个答案正是我所寻找的(在jQuery):
var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');
如果你正在使用jQuery并且你正在请求图像大小,你必须等待它们加载,否则你只会得到零。
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});