Solvedamphtml Responsive Layout for <amp-img> BREAKS aspect ratio when nested in <amp-carousel>

This bug breaks <amp-carousel>s containing <amp-img>s of different sizes completely.

The code block in question

<amp-img class="full-bleed" 
placeholder
src="https://placehold.it/300x450"
tabIndex=0
on="tap:my-lightbox"
width=400
height=400
layout="responsive"
role="button"></amp-img>
<amp-lightbox 
  id="my-lightbox"
  class="lightbox" 
  layout="nodisplay">
  <div class="lightbox-content">
      <amp-carousel height=400 width=400 type=slides>
        <amp-img src="https://placehold.it/300x450" layout="responsive" width=300 height=450></amp-img>
        <amp-img src="https://placehold.it/300x450" layout="responsive" width=300 height=450></amp-img>
        <amp-img src="https://placehold.it/300x400" layout="responsive" width=300 height=400></amp-img>
        <amp-img src="https://placehold.it/300x450" layout="responsive" width=300 height=450></amp-img>
        <amp-img src="https://placehold.it/500x200" layout="responsive" width=500 height=200></amp-img>
        </amp-anim>
      </amp-carousel>
  </div>
</amp-lightbox>

Everything works fine but the images fill the box without regards to aspect ratio, even with the declared height and width inside of the AMP-HTML tag. Normally when I declare a height and width and use responsive as the layout the <amp-img> maintains its aspect ratio.

26 Answers

Original

✔️Accepted Answer

dvoytenko

@johnnyshankman Forgot about this option. It's possible to use layout=responsive or layout=fill for replaced content such as images to preserve aspect ratio in slides. Here's an example:

http://jsbin.com/vuxite/edit?html,css,output

In a nutshell you have to see object-fit: contain on the encapsulated IMG element.

Let me know if this works for you. This would work for any replaced element: img, video, etc.

@johnnyshankman Forgot about this option This bug breaks <amp-carousel>s containing <amp-img>s of di...

amphtml amp-ad 'Ad' attribution does not collapse if no ad returned

Use a amp-ad:before selector? When the ad collapses the before will too. What's the issue? amp-ad 'A...

Solvedamphtml Responsive Layout for <amp-img> BREAKS aspect ratio when nested in <amp-carousel>

✔️Accepted Answer

Related Issues: