檢測圖像在CSS中的大小調整

Question

我的博客文章位於600px寬的容器中。當我的圖像寬度超過600像素時，我通過CSS調整大小（.post img {max-width: 600px}）

我希望用戶能夠點擊這些調整大小的圖像並在燈箱中看到完整大小的版本，但要這樣做我需要在Javascript中檢測哪些圖像已被如此調整大小（因爲我不想在Lightbox中顯示全尺寸內嵌的圖像）

Answer 1

您可以檢查圖像元素的width屬性來獲取圖像的呈現寬度：但是，如果你在JS設置max-width什麼。如果是600，圖像很可能會縮小。但是，圖像最初可能正好是600像素寬。

如果瀏覽器支持新的HTML 5 naturalWidth屬性，則可以獲取原始圖像寬度（以像素爲單位），並將其與clientWidth的值進行比較。

Answer 2

我不相信你可以在某種意義上說你是在說JS將讀取它在DOM中的圖像。

只是僞代碼

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