具有不同图像尺寸的AMP旋转木马

Question

我正在努力创建一个带有不同尺寸图像的放大器转盘。我想将旋转木马中的图像缩放到固定高度

文档中提供的示例都具有相同的宽度/高度。

我试着省略了amp img元素的宽度

<amp-carousel width=500 height=300>
    <amp-img src="http://placehold.it/200x600" width=200 height=600></amp-img>
    <amp-img src="http://placehold.it/700x550" width=700 height=550></amp-img>
    <amp-img src="http://placehold.it/340x410" width=340 height=410></amp-img>
</amp-carousel>

我已经创建了一个js提琴来向您展示我所拥有的

https://jsfiddle.net/ag38afa7/

编辑：

风格和文档不一致还是我不明白？
在amp-carousel页面上，它说：Layout不支持：响应式，但在演示页面上，amp-img元素具有布局="响应式"
https://ampbyexample.com/components/amp-carousel/

Answer 1

现在有一个全面的教程，解释ampbyexample.com，不需要有相同高度的图像了。

下面是一个稍加修改的示例（我使用图而不是div作为标题）

<style amp-custom>
  figure {
    position: relative;
    width: 100%;
    height: 300px;
  }
  amp-img img {
    object-fit: contain;
  }
</style>

<amp-carousel
  height="300"
  layout="fixed-height"
  type="slides">
  <figure>
    <amp-img
      layout="fill"
      src="https://unsplash.it/500/400"></amp-img>
  </figure>
  <figure>
    <amp-img
      layout="fill"
      src="https://unsplash.it/500/500"></amp-img>
  </figure>
  <figure>
    <amp-img
      layout="fill"
      src="https://unsplash.it/300/500"></amp-img>
  </figure>
</amp-carousel>

Answer 2

您必须使用固定高度布局，并给旋转木马和所有图像相同的高度。宽度需要相应更新以保持宽高比。示例：

<amp-carousel height=300 layout="fixed-height">
    <amp-img src="http://placehold.it/200x600" width=100 height=300></amp-img>
    <amp-img src="http://placehold.it/700x550" width=381 height=300></amp-img>
    <amp-img src="http://placehold.it/340x410" width=248 height=300></amp-img>
</amp-carousel>

目前不支持自动调整宽度。