OA's imgLiquid - iOA
OA's imgLiquid - iOA

OA's imgLiquid 實作心得

吳政賢· ·

imgLiquid 是一個處理前端圖片置中的 jQuery Extend Function,其中參考了 imgLiquid,但其架構與做法不大相同。



此作品雖然與 imgLiquid 功能一樣,但是做法不同,前者將 <img /> 設定成隱藏,在取出其圖片網址後設定在該 <img /> 父元素的 Style,而我的這次要實作的雖然目的相同,但做法則不一樣。

首先需要幾個先決條件:

  • 父層 position 一定要是 position、absolute、fixed。
  • 父層一定要有設定 width 以及 height。

做法是將 <img /> 的 position 設定成 absolute,在用 top、right、bottom、left 去調整位置,而此時父層再加上一項屬性 overflow: hidden; 即可做到調整位置的效果了!

imgLiquid 垂直置中 OA's imgLiquid-iOA
垂直置中
imgLiquid 水平置中 OA's imgLiquid-iOA
水平置中



其中功能也加入很多方式使用,包含了搭配 元素屬性 設定..等功能,若要更清楚瞭解可以置 GitHub 查看說明。

以上就是這次 OA's imgLiquid 的開發心得如有任何問題歡迎來信討論。