如何支援尺寸不明的圖片

簡介

本範例示範如何在 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 上編輯範例