如何支援尺寸未知的圖片

簡介

此範例示範如何在 AMP 頁面中嵌入尺寸未知的圖片，同時維持正確的長寬比。

背景

為了避免在載入 AMP 頁面時發生頁面跳動，AMP 執行階段的靜態版面配置系統要求預先知道所有元素的高度。這就是為什麼 `amp-img` 擴充功能需要指定圖片的 `width` 和 `height`

<amp-img width="300" height="200" src="https://unsplash.it/300/200?image=1074"></amp-img>

`amp-img` 擴充功能支援不同的版面配置。`responsive` 版面配置需要寬度和高度才能判斷圖片的長寬比。

<amp-img layout="responsive" width="300" height="200" src="https://unsplash.it/300/200?image=1074"></amp-img>

`fixed-height` 版面配置只需要高度，但會拉伸圖片以填滿可用的寬度

<amp-img layout="fixed-height" height="200" src="https://unsplash.it/300/200?image=1074"></amp-img>

`fill` 版面配置是 `amp-img` 唯一支援不需要任何圖片尺寸的版面配置。然而，圖片會在兩個維度上拉伸以填滿容器

  <div class="fixed-container">
<amp-img layout="fill" src="https://unsplash.it/300/200?image=1074"></amp-img>
  </div>
  <div class="fixed-container">
<amp-img layout="fill" src="https://unsplash.it/200/300?image=1074"></amp-img>
  </div>

問題是：如何在 AMP 頁面中嵌入尺寸未知的圖片，同時維持其正確的長寬比？

Object-Fit 來救援

我們可以結合 AMP 的fill 版面配置和 object-fit CSS 屬性來解決這個問題。`object-fit` 屬性可協助我們確保圖片在透過 `fill` 版面配置調整大小時，仍能維持其長寬比。

首先，我們需要定義一個容器來限制圖片的最大尺寸，例如：

 .fixed-container {
   position: relative;
   width: 200px;
   height: 200px;
 }

然後，我們可以使用 `object-fit` 屬性來定義 `amp-img` 擴充功能內部的 `img` 如何調整大小以維持其長寬比

  amp-img.contain img {
    object-fit: contain;
  }

object-fit: contain 會增加或減少圖片的大小以填滿容器，同時保留圖片的長寬比。

<div class="fixed-container">
  <amp-img class="contain" layout="fill" src="https://unsplash.it/400/300"></amp-img>
</div>
<div class="fixed-container">
  <amp-img class="contain" layout="fill" src="https://unsplash.it/300/300"></amp-img>
</div>
<div class="fixed-container">
  <amp-img class="contain" layout="fill" src="https://unsplash.it/200/300"></amp-img>
</div>

使用 object-fit: cover，圖片將填滿其容器的高度和寬度，但透過裁剪圖片來維持長寬比

<div class="fixed-container">
  <amp-img class="cover" layout="fill" src="https://unsplash.it/400/300"></amp-img>
</div>
<div class="fixed-container">
  <amp-img class="cover" layout="fill" src="https://unsplash.it/300/300"></amp-img>
</div>
<div class="fixed-container">
  <amp-img class="cover" layout="fill" src="https://unsplash.it/200/300"></amp-img>
</div>

固定高度版面配置與正確的長寬比

此方法也適用於響應式容器尺寸，例如，動態寬度

 .fixed-height-container {
   position: relative;
   width: 100%;
   height: 300px;
 }

結果是維持正確圖片長寬比的固定高度版面配置

<div class="fixed-height-container">
  <amp-img class="contain" layout="fill" src="https://unsplash.it/400/300"></amp-img>
</div>
<div class="fixed-height-container">
  <amp-img class="contain" layout="fill" src="https://unsplash.it/300/300"></amp-img>
</div>
<div class="fixed-height-container">
  <amp-img class="contain" layout="fill" src="https://unsplash.it/200/300"></amp-img>
</div>
<div class="fixed-height-container">
  <amp-img class="contain" layout="fill" src="https://unsplash.it/1920/480"></amp-img>
</div>

圖片輪播

透過將此方法與使用 `fixed-height` 版面配置的 `amp-carousel` 結合，此方法也非常適用於圖片輪播。

<amp-carousel height="300" layout="fixed-height" type="slides">
  <div class="fixed-height-container">
    <amp-img class="contain" layout="fill" src="https://unsplash.it/500/400"></amp-img>
  </div>
  <div class="fixed-height-container">
    <amp-img class="contain" layout="fill" src="https://unsplash.it/500/500"></amp-img>
  </div>
  <div class="fixed-height-container">
    <amp-img class="contain" layout="fill" src="https://unsplash.it/300/500"></amp-img>
  </div>
</amp-carousel>

需要更多說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。

前往 Stack Overflow

有未說明的特性嗎？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別熱衷的問題提供一次性貢獻。

在 GitHub 上編輯範例