Détection du redimensionnement d'une image au format CSS

Question

Mes articles de blog se trouvent dans un conteneur de 600 pixels de large. Quand j'ai une image qui est plus large que 600px, je la redimensionne via CSS (.post img {max-width: 600px})

Je voudrais que les utilisateurs puissent cliquer sur ces images redimensionnées et voir la version en taille réelle dans une visionneuse, mais pour ce faire J'ai besoin de détecter en Javascript quelles images ont été ainsi redimensionnées (puisque je ne veux pas de visionner les images qui apparaissent en taille réelle dans le post)

Answer 1

Vous pouvez vérifier la propriété de l'élément d'image width pour obtenir la largeur rendu de l'image. Si c'est 600, l'image est le plus susceptible d'être réduite. Cependant, l'image pourrait à l'origine avoir exactement 600 pixels de large.

Si un navigateur prend en charge la nouvelle propriété HTML 5 naturalWidth, vous pouvez obtenir la largeur de l'image originale (en pixels) et la comparer à la valeur clientWidth.

Answer 2

Je ne crois pas que vous puissiez dans le sens où vous parlez comme JS va lire l'image dans le DOM. Cependant si vous définissez l'max-width dans la JS:

Juste psuedocode

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