在 amp-img 使用 object-fit

之前有提過要在 AMP 裡面使用圖片必須要使用 amp-img 的標籤，而且需要給定寬跟高，但在現在很常需要用到裡用把圖片塞入某個區塊內的 object-fit 的方式，就沒辦法直接用了，但還好官方也有提供方法讓我們可以去使用 object-fit，首先在 amp-img 外面那層設定一個元素包起來，並把他設定 position: relative;

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

.img-container{
  position: relative;
}

一般我們也會對這個區塊設定大小，再看需求設定即可。

amp-img 則要多增加 layout="fill" 的屬性，接著再去對 amp-img 下面的圖片設定 object-fit 就好了。

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

參考文章：How to support Images with unknown Dimensions