如何支援尺寸不明的圖片

簡介

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