Detecting when an image has been resized in CSS

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 re开发者_运维知识库sized 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)

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.

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();
    }
}