Determine Original Size of Image Cross Browser

Determine original size of image cross browser?

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.

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I'd recommend using an image's onload event. Here's a quick example:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

To avoid any of the effects CSS might have on the image's dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.

You can also use the naturalHeight and naturalWidth HTML5 attributes.

Getting image dimensions after browser resize

If you mean that you have an image that is, say, 200x200 pixels, and has been resized to (say) 150x150 pixels because of the CSS properties, then image.width and image.height should work fine. That is, they should give you 150x150, and not 200x200. (See here for the mozilla reference.)

Alternately, you could try element.clientWidth and element.clientHeight (https://developer.mozilla.org/en/DOM/element.clientHeight), which give the rendered sizes of any DOM element.

I haven't tested this in IE, but it should work fine there as well. (The MSDN reference page for width is here. You can also find clientWidth there.)

What browser are you testing on?

100% width background image with an 'auto' height (2015) - Cross browser

if you don't to want use media queries a lot to change the background-image, and as for your your fiddle it seems to me that you are trying to only have the code as simple as possible by using img tag, and like you mentioned:

It would be good if it's working on different browsers (At least
Chrome / Firefox)

So..you can use the srcset attribute in your img tag, like this:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="image">

srcset

A list of one or more strings separated by commas indicating a set of
possible image sources for the user agent to use. Each string is
composed of:

1. a URL to an image,
2. optionally, whitespace followed by one of:
   
   
   • a width descriptor, that is a positive integer directly followed by 'w'. The width descriptor is divided by the source size
     given in the sizes attribute to calculate the effective pixel density.
   • a pixel density descriptor, that is a positive floating point number directly followed by 'x'.

If no descriptor is specified, the source is assigned the default
descriptor: 1x.

It is invalid to mix width descriptors and pixel density descriptors
in the same srcset attribute. Duplicate descriptors (for instance, two
sources in the same srcset which are bot described with '2x') are
invalid, too.

User agents are given discretion to choose any one of the available
sources. This provides them with significant leeway to tailor their
selection based on things like user preferences or bandwidth
conditions.

Javascript: get image size

Full correct answer: https://stackoverflow.com/a/1944298/966972

(it was in comments for this question, but not in answers)

get image real size JS/Jquery

You can use the naturalWidth property:

var img = document.getElementById('imageToTest'), // or whatever...
    width = img.naturalWidth;

JS Fiddle demo.

This does, of course, require that the image has time to load before the JavaScript is executed (so, in jQuery, using the $(window).load() method). It is, also, HTML5-only (which I hadn't realised until I checked, just now).

Incidentally, as perhaps the name implies, there's also the naturalHeight property (if that would be of use).

Updated to add a slightly more functional approach:

function showNaturalInfo(el) {
    if (!el || el.tagName.toLowerCase() !== 'img') {
        return false;
    }
    else {
        var w = el.naturalWidth,
            h = el.naturalHeight,
            D = document,
            details = D.createElement('span'),
            detailsText = D.createTextNode('Natural width: ' + w + 'px; natural height: ' + h + 'px.');
        details.appendChild(detailsText);
        el.title = 'Natural width: ' + w + 'px; natural height: ' + h + 'px.';
        el.parentNode.insertBefore(details, el.nextSibling);
    }
}

var imgs = document.getElementsByTagName('img');

for (var i = 0, len = imgs.length; i < len; i++) {
    showNaturalInfo(imgs[i]);
}​

JS Fiddle demo.

References:

• naturalWidth.

---

Related Topics