圖片長寬比不正確
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
如果轉譯的圖片長寬比與來源檔案 (「自然」顯示比例) 有顯著差異,算繪後的圖片可能會扭曲,因而產生不愉快的使用者體驗。
Lighthouse 圖片顯示比例稽核失敗
Lighthouse 會在以自然比例算繪時,標記任何像素轉譯尺寸超過少數像素差異度的任何圖片:
導致圖片顯示比例不正確有兩個常見原因:
- 設定圖片的寬度和高度值與來源圖片的尺寸不同。
- 圖片已設為以可變大小的容器百分比表示的寬度和高度。
確保圖片以正確的顯示比例顯示
使用映像檔 CDN
圖片 CDN 可讓您更輕鬆地自動建立不同尺寸版本的映像檔。如需概要說明,請參閱「使用圖片 CDN 將圖片最佳化」一文;如需實際操作程式碼研究室,請參閱如何安裝 Thumbor 圖片 CDN。
查看會影響圖片顯示比例的 CSS
如果您找不到導致顯示比例錯誤的 CSS,Chrome 開發人員工具可顯示影響特定圖片的 CSS 宣告。詳情請參閱 Google 的「僅查看實際套用至元素的 CSS」頁面。
請檢查 HTML 中圖片的 width
和 height
屬性
如果可能的話,建議您在 HTML 中指定每張圖片的 width
和 height
屬性,以便瀏覽器為圖片分配空間。這種方法有助於確保載入圖片後,圖片下方內容不會位移。
但是,要是您使用回應式圖片,在瞭解可視區域尺寸之前,就無法得知寬度和高度,因此在 HTML 中指定圖片尺寸可能並不容易。建議您使用 CSS 顯示比例程式庫或顯示比例方塊,為回應式圖片保留長寬比。
最後,請參閱「提供尺寸正確的圖片」一文,瞭解如何根據使用者的裝置提供適當大小的圖片。
資源
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2019-05-02 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2019-05-02 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2019-05-02 (世界標準時間)。"],[],[]]