确定图像浏览器的原始大小？

You can preload the image into a javascript Image object, then check the width and height properties on that object.

You have 2 options:

Option 1:

Remove the width and height attributes and read offsetWidth and offsetHeight

Option 2:

Create a JavaScript Image object, set the src, and read the width and height (you don't even have to add it to the page to do this).

function getImgSize(imgSrc) {
var newImg = new Image();


newImg.onload = function() {
var height = newImg.height;
var width = newImg.width;
alert ('The image size is '+width+'*'+height);
}


newImg.src = imgSrc; // this must be done AFTER setting onload
}

Edit by Pekka: As agreed in the comments, I changed the function to run on the ´onload´ event of the image. Otherwise, with big images, height and width would not return anything because the image was not loaded yet.

Images (on Firefox at least) have a naturalWidth/height property so you can use img.naturalWidth to get the original width

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
console.log("Width",img.naturalWidth);
console.log("Height",img.naturalHeight);
}

Source

/* Function to return the DOM object's in crossbrowser style */
function widthCrossBrowser(element) {
/* element - DOM element */


/* For FireFox & IE */
if(     element.width != undefined && element.width != '' && element.width != 0){
this.width  =   element.width;
}
/* For FireFox & IE */
else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){
this.width  =   element.clientWidth;
}
/* For Chrome * FireFox */
else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){
this.width  =   element.naturalWidth;
}
/* For FireFox & IE */
else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){
this.width  =   element.offsetWidth;
}
/*
console.info(' widthWidth width:',      element.width);
console.info(' clntWidth clientWidth:', element.clientWidth);
console.info(' natWidth naturalWidth:', element.naturalWidth);
console.info(' offstWidth offsetWidth:',element.offsetWidth);
console.info(' parseInt(this.width):',parseInt(this.width));
*/
return parseInt(this.width);


}


var elementWidth    = widthCrossBrowser(element);

Just changing a little bit Gabriel's second option, to be more easy to use:

function getImgSize(imgSrc, callback) {
var newImg = new Image();


newImg.onload = function () {
if (callback != undefined)
callback({width: newImg.width, height: newImg.height})
}


newImg.src = imgSrc;
}

Html:

<img id="_temp_circlePic" src="http://localhost/myimage.png"
style="width: 100%; height:100%">

Sample call:

getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) {
// do what you want with the image's size.
var ratio = imgSize.height / $("#_temp_circlePic").height();
});

Adding adjustments to Gabriel's second option to help people working with react-grid-gallery.

const [images, setImages] = useState([])


const getImgSize = function (imgSrc, index) {
var newImg = new Image()


newImg.onload = function () {
setImages((images) => [
...images,
{
id: index,
src: imgSrc,
thumbnail: imgSrc,
width: newImg.width,
height: newImg.height,
},
])
}


newImg.src = imgSrc
}

In useEffect you can call this method

gallery_urls?.map((url, index) => {
getImgSize(url, index)
})