AMP-Carousel with varying image dimensions

user_6018068 0
Viewed 3103

I'm struggling to create an AMP-Carousel with images which have varying dimensions. I want to scale the images in the carousel to a fixed height & an automatic width.

The examples provided in the docs all have the same width/height.

I've tried leaving out the width for the amp-img elements & using layout="fixed-height" but that didn't work at all. The docs are very confusing.

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

I've created a js-fiddle to show you what I've got & what I want

https://jsfiddle.net/ag38afa7/

Edit:

The styles are not consistent with the docs or I don't get them?
On the amp-carousel page it says: Layout not supported for: responsive but on the demo page the amp-img elements have layout="responsive"
https://ampbyexample.com/components/amp-carousel/

amp-html
2 Answers

There is now a comprehensive tutorial with explanations on ampbyexample.com, and no need to have images the same height anymore.

Here is a slightly modified (I use figure instead of div for captions) minimal working example :

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