AMP-Carousel with varying image dimensions

Question

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/

You need to use the layout type `fixed-height`. This element takes the space available to it but keeps the height unchanged. The width attribute must not be present or must be equal to auto.Check this [example](https://github.com/ampproject/amphtml/tree/ef00e97ddcee7fb96398f656c53a4c60523829d4). — abielita, Mar 05 '16 at 07:28
This didn't work for me, see my updated jsfiddle from the answer below: http://jsfiddle.net/ag38afa7/1 Could you update the jsfiddle with your solution? — Brian G. Bell, Mar 08 '16 at 09:42
As sebastian's updated answer below confirmed that it's currently not possible to do that automatically, I solved it this way : I calculated the aspect-ratio (originalWidth / originalHeight) & then found the new width for each image this way: $carouselHeight * ratio — Brian G. Bell, Mar 24 '16 at 10:49

Sebastian Benz · Accepted Answer · 2016-03-23T09:25:42.993

5

You have to use the fixed-height layout and give carousel and all images the same height. The width needs to be updated accordingly to keep the aspect ratio. Example:

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

Automatically adjusting the width is currently not supported.

edited Mar 23 '16 at 09:25

answered Mar 05 '16 at 19:38

Sebastian Benz

4,238
1
21
17

I'm afraid this stretches the images, see the updated jsfiddle:https://jsfiddle.net/ag38afa7/1/ – Brian G. Bell Mar 07 '16 at 08:54
It doesn't stretch the images. They still have the original aspect-ration. – Sebastian Benz Mar 07 '16 at 15:33
I've updated the jsfiddle with your solution & it stretches the images: https://jsfiddle.net/ag38afa7/1/ – Brian G. Bell Mar 14 '16 at 13:21
Sorry - I forgot to update the width in the sample. Fixed it. – Sebastian Benz Mar 23 '16 at 09:26

score 0 · Answer 2 · answered Sep 06 '18 at 16:14

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>

AMP-Carousel with varying image dimensions

2 Answers2

Linked