在 amp-img 使用 object-fit

分享:
標籤: AMP amp-img CSS

之前有提過要在 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