Detecting when an image has been resized in CSS

Question

My blog posts live in a container that's 600px wide. When I have an image that's wider than 600px, I resize it via CSS (.post img {max-width: 600px})

I'd like users to be able to click on these resized images and see the full size version in a lightbox, but to do this I need to detect in Javascript which images have been thus resized (since I don't want to lightbox images that appear full size inline in the post)

Answer 1

I don't believe you can in the sense you are speaking as JS is going to read the image it is in the DOM. However what if you set the max-width in the JS:

Just Psuedocode

onload
{
    if (img.width > 600px)
    {
        img.style = max-width: 600px;
        img.lightbox();
    }
}

Answer 2

You can check the image element's width property to get the rendered width of the image. If it's 600, the image is most likely to be shrinked. However, the image might originally as well be exactly 600 pixels wide.

If a browser supports the new HTML 5 naturalWidth property, you can get the original image width (in pixels) and compare that with the value of clientWidth.