Обнаружение, когда изображение было изменено в CSS

Question

Мои сообщения в блоге живут в контейнере шириной 600 пикселей. Когда у меня есть изображение шириной более 600 пикселей, я изменяю его размер с помощью CSS (.post img {max-width: 600px})

Я хочу, чтобы пользователи могли нажимать на эти измененные размеры и просмотреть полноразмерную версию в лайтбокс, но для этого Мне нужно обнаружить в Javascript, что изображения были таким образом изменены (так как я не хочу, чтобы изображения в виде лайтбоксов отображались в полноразмерном виде в строке)

Answer 1

Вы можете проверить width свойство регистрирующего изображение элемента, чтобы получить обработанную ширину изображения. Если это 600, изображение, скорее всего, будет сжато. Тем не менее, изображение может первоначально быть ровно 600 пикселей в ширину.

Если браузер поддерживает новое свойство HTML 5 naturalWidth, вы можете получить исходную ширину изображения (в пикселях) и сравнить это со значением clientWidth.

Answer 2

Я не верю, что вы можете в том смысле, что говорите как JS собирается прочитать изображение, которое находится в DOM. Однако, что если вы установите max-width в JS:

Просто Psuedocode

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