If you select and image with jQuery and then use .width()
, you’ll get the images current width, even if it’s been scaled (e.g. max-width: 100%;). You can access the images native width (even if it doesn’t have any attributes which declare it) like this:
// Get on screen image
var screenImage = $("#image");
// Create new offscreen image to test
var theImage = new Image();
theImage.src = screenImage.attr("src");
// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;
Hi Chris,
When I look at the code I don’t understand two things:
1. Why don’t you use the first created var screenImage further in the script?
2. Where does mainScreenshot come from?
(I’m trying to learn jQuery a bit)
I just had that a bit screwed up, variable reference is correct now.
Very subtle Chris. This is a great usage of native objects of JavaScript. I think it can simply become a jQuery plugin, like:
I discovered that Chrome/FF had an extra attribute for images when working on a custom carousel. Here is a little function I wrote that uses the properties if they exist, and sets them if they don’t. One big assumption (as with the original example) is that the sizes are available immediately. Technically having a separate function on browsers without ‘natural(width|height)’ that fills in the value before you need it would be ‘safer’.
Hi Chris,
Thumbs up for your help. I find the ‘RevealingPhotoSlider’ very interesting, however, it is not compatible with Chrome. On clicking ‘MORE INFO’, in Chrome, the image does not show up but rather shrinks. Also in IE8. Am just creating my website so don’t have the ‘live’ link, hence could not put a web address, sorry, and I hope to hear back from you soon.
Thank you.
I found this would only work in Chrome within $(window).load — $(document).ready seems to fire too soon.
Graham, you saved my day!
@Graham: only the image has to be loaded before calculating, you can use $(‘#image’).load
works in all browsers I tested so far, mobile as well
thanks a lot, chris
returning native height and width as zero.
There are bound to be cases where we need the dimensions of an image that hasn’t loaded yet, e.g. an image in a hidden layer. Here’s the workaround I’ve come up with for such situations:
where imgs is a collection of
<img>
elements.There is an issue on getting the native width on firefox and IE
is there a way to get that issue fixed?
ssssa dsadsad
asd aasd asd
If image is cached (for eg. using output cached in IIS 7.5) above method didn’t work in iPhone 5+
Good idea, but don’t work…follwoing script do the trick for me.
jQuery.fn.realSize = function() {
};
jQuery.fn.realWidth = function( options) {
};
jQuery.fn.realHeight = function( options) {
};
$( ‘img’).realSize(); // Object {width: 960, height: 720}
Jens your solution work fine for me ;)
I addon this on jQuery JavaScript Library v2.1.0
Perfect thk man
Just what I needed today! Thanks – even a couple of years on still useful :)
Chris / All
Is there any way to do something like this?
img width:100%;
img max-width:NATURAL;
So I don’t want an image to become pixelated but if it’s big enough go to 100%.
Ian, that should be simple as
Hey Chris,
i think following do the trick for you.
jQuery is fine but I was looking for a CSS only answer. Seems odd that you can’t specify the natural image width unless you omit the CSS width altogether.
This is works great for me on local images but when using images on a CDN, it seems to only pick up the size on first load only, if you call the function on window.resize the function returns 0.
Here’s a jsFiddle: http://jsfiddle.net/WKzJ4/2/
Any solutions to this?
Kenyon,
Did you ever find a solution for finding the natural size of an image on a CDN? Thanks for any help.
Hey Kenyon,
i’m not sure what do you like to do. The sense of the code was determine the original size of an image.
Btw. : get original size of an image with «new Image()» works not fine.
In iOS 8:
Does anyone else get this code returning,
the height for the width
and the width for the height
when you take a portrait photo with the camera?
I guess the photo taken isn’t rotated at this point or something. But when the image is loaded to the screen it’s the right way up. Confused.
You need to wait for image to load
Something like this:
Thanks, i’ll give this a go.
Works great! Thanks.