Code Snippet
Get an Images Native Width
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:
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.