在 amp-img 使用 object-fit

標籤: AMP amp-img CSS

之前有提過要在 AMP 裡面使用圖片必須要使用 amp-img 的標籤,而且需要給定寬跟高,但在現在很常需要用到裡用把圖片塞入某個區塊內的 object-fit 的方式,就沒辦法直接用了,但還好官方也有提供方法讓我們可以去使用 object-fit,只要在 amp-img 的標籤內加上 layout="fill"。

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

然後再去對圖片設定 object-fit 就好了。

img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

 

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