7

我正在努力创建一个带有不同尺寸图像的 AMP 轮播。我想将轮播中的图像缩放到固定高度和自动宽度。

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

我尝试省略 amp-img 元素的宽度并使用 layout="fixed-height" 但这根本不起作用。文档非常混乱。

<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-fiddle 来向您展示我所拥有的和我想要的

https://jsfiddle.net/ag38afa7/

编辑：

样式与文档不一致或我不明白？
在 amp-carousel 页面上显示：Layout not supported for: responsive 但在演示页面上 amp-img 元素具有layout="responsive"
https://ampbyexample.com/components/amp-carousel/

4

2 回答 2

5

您必须使用fixed-height布局并为轮播和所有图像提供相同的高度。需要相应地更新宽度以保持纵横比。例子：

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

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

于 2016-03-05T19:38:39.657 回答
0

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

这是一个稍作修改（我使用figure而不是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>
于 2018-09-06T16:14:06.907 回答