"Position: Contain" 在 AMP 轮播中

Question

创建 AMP 轮播时，如何确保不同比例的图片以相同的方式包含？也就是说，图片会显示width: 100%，但是height会根据图片的比例进行裁剪。

Answer 1

您可以将 amp-carousel 的 fixed-height 布局与 amp-img 的 fill 布局相结合来实现此目的：

<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>

诀窍是对嵌入式 img:

使用 object-fit: contain|cover

.contain img {
  object-fit: cover;
}

Here是样本。

"Position: Contain" 在 AMP 轮播中

"Position: Contain" in AMP Carousel

carousel

amp-html