簡介「object-fit」

在相關 Web 文件上常見的問題之一,就是要讓同一地方顯示不同尺寸的圖片 (或影片)。或許你正在撰寫動態圖庫 App,以接收使用者所提交的檔案。但你無法要求所有人上傳的圖片都是一樣的解析度或長寬比。這時候該怎麼辦呢?

雖然可以不管圖片尺寸,逕自讓圖片填滿置換元素 (Replaced element),但效果往往不佳且看起來不甚美觀。又如果每次都即時執行一些動態切割或縮放,又比整個網頁的建構作業還要麻煩 (舉例來說,你可能正在 CMS 上工作,但你根本沒有網頁內容之外的編輯權限)。

CSS Image Values and Replaced Content 模組則提供所謂「object-fit」屬性,可解決類似問題;另有「object-position」可設定內容在元素內部的垂直與水平位置。

這些元素都已經能完整支援目前的主要瀏覽器 (但 IE 除外)。而我們將透過本文展現其中幾項使用範例。

注意:object-fit 可搭配 SVG 內容,但只要設定 SVG 內部的 preserveAspectRatio="" 屬性,亦可達到相同效果。

 

如果你正在設計圖庫類的 App,也遇上類似難題而相關功能,就可參閱原文後段介紹的程式碼與展示喔!

 

 

原文連結:Exploring object-fit

 

 

0 則回應

Firefox OS被迫轉型 Mozilla傳解散50人研發團隊 Firefox OS被迫轉型 Mozilla傳解散50人研發團隊 10 個月前
介紹 debugger.html 介紹 debugger.html 1 年前
「FlyWeb」純正的 Web 跨裝置互動 (上) 「FlyWeb」純正的 Web 跨裝置互動 (上) 1 年前
網際網路是全球公共資源 網際網路是全球公共資源 1 年前
Web 內容的分析與偵測函式 Web 內容的分析與偵測函式 1 年前
A-Frame 0.2.0:可擴充的 VR Web A-Frame 0.2.0:可擴充的 VR Web 1 年前
HTML 5 遊戲開發系列影片 HTML 5 遊戲開發系列影片 1 年前
Mozilla 將 Web 推向遊戲平台新層次 Mozilla 將 Web 推向遊戲平台新層次 1 年前

熱門文章

最新消息