主要的功能是對於 lytebox 的圖片大小作調整,對應瀏覽環境而輸出不同尺寸的圖。
( 簡單來說就是解析度高就給大圖,解析度低就給小圖啦~ )
另外這個函數也有附加調整自身圖片大小的功能,下面會舉幾個例子出來。
不過使用前提是圖片必須是自己上傳到 Blogger 的圖,因為是綁定 PWA API 寫的。
以上,就是這次的更新點,有問題的人請再提出吧:3
基礎使用:
<img src="圖片網址" onload="LyteSize(this)" alt="圖片敘述" />
<img src="圖片網址" onload="LyteSize(this)" alt="圖片敘述" />
↓

解說:
在上面的例子中,試著把圖片點開來會發現圖片大小會大致上符合頁寬。
另外也可以先把瀏覽器縮小尺寸後再重新整理,會發現點開的圖片跟著調小了。
在上面的例子中,試著把圖片點開來會發現圖片大小會大致上符合頁寬。
另外也可以先把瀏覽器縮小尺寸後再重新整理,會發現點開的圖片跟著調小了。
進階使用(調整圖片自身大小):
<img src="圖片網址" onload="LyteSize(this,true)" alt="圖片敘述" />
<img src="圖片網址" onload="LyteSize(this,true)" alt="圖片敘述" />
↓

解說:
在上面的例子中,會發現圖片大小也跟著自動調整為文章寬度。
在上面的例子中,會發現圖片大小也跟著自動調整為文章寬度。
進階使用(調整圖片自身大小,不展開lytebox):
<img src="圖片網址" onload="LyteSize(this,false)" alt="圖片敘述" />
<img src="圖片網址" onload="LyteSize(this,false)" alt="圖片敘述" />
↓

解說:
跟第二個例子差不多,只是並不展開 lytebox 而已。
跟第二個例子差不多,只是並不展開 lytebox 而已。
0 意見:
張貼留言