是否有JavaScript或jQuery API或方法来获取页面上图像的尺寸?
当前回答
从父div中删除浏览器解释设置是很重要的。所以如果你想要真实的图像宽度和高度,你可以使用
$('.right-sidebar').find('img').each(function(){
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).imageResize();
});
这是我的一个TYPO3项目示例,我需要图像的真实属性来缩放它与正确的关系。
其他回答
jQuery的答案:
$height = $('#image_id').height();
$width = $('#image_id').width();
要得到自然的高度和宽度:
.naturalHeight document.querySelector (img); .naturalWidth document.querySelector (img); < img src = " img.png " >
如果你想获取样式的高度和宽度:
document.querySelector(“img”).offsetHeight; document.querySelector(“img”).offsetWidth;
在使用真实图像大小之前,您应该加载源图像。如果使用jQuery框架,可以以简单的方式获得真实图像大小。
$("ImageID").load(function(){
console.log($(this).width() + "x" + $(this).height())
})
最近我有同样的问题,在一个错误的伸缩滑块。由于加载延迟,第一张图像的高度被设置得较小。我尝试了以下方法来解决这个问题,它是有效的。
// Create an image with a reference id. Id shall
// be used for removing it from the DOM later.
var tempImg = $('<img id="testImage" />');
// If you want to get the height with respect to any specific width you set.
// I used window width here.
tempImg.css('width', window.innerWidth);
tempImg[0].onload = function () {
$(this).css('height', 'auto').css('display', 'none');
var imgHeight = $(this).height();
// Remove it if you don't want this image anymore.
$('#testImage').remove();
}
// Append to body
$('body').append(tempImg);
// Set an image URL. I am using an image which I got from Google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';
这将为您提供相对于您设置的宽度的高度,而不是原始宽度或零。
使用jQuery,你可以这样做:
var imgWidth = $("#imgIDWhatever").width();