与裁剪图像的amp-image-lightbox问题

Question

我有一个amp-image-lightbox的问题。我目前的图像标签指向全尺寸图像的裁剪图像。在桌面上，点击时的任何裁剪图像都会以灯箱的全尺寸显示。是否有一种方法可以使用amp-image-lightbox for AMP页面以相同的方式工作？

我设法得到它的工作，但我看到在灯箱不是全尺寸的图像

Answer 1

不知道这是可能的AMP-图像收藏夹裁剪图像。然而，很容易实现与由AMP收藏夹相同的行为：

<amp-img class="cropped" 
      on="tap:my-lightbox" 
      role="button" 
      tabindex="0" 
      src="https://unsplash.it/300/200" 
      width="200" height="200"></amp-img> 

    <amp-lightbox id="my-lightbox" layout="nodisplay"> 
    <div class="lightbox" 
     on="tap:my-lightbox.close" 
     role="button" 
     tabindex="0"> 
     <div> 
     <amp-img src="https://unsplash.it/300/200" 
       layout="responsive" 
       width="300" 
       height="200"></amp-img> 
     </div> 
    </div> 
    </amp-lightbox> 

...这里是CSS：

<style amp-custom> 
    amp-img.cropped img { 
     object-fit: cover; 
    } 
    amp-lightbox .lightbox { 
     background: #333; 
     width: 100%; 
     height: 100%; 
     display: flex; 
     justify-content: center; 
     flex-direction: column; 
    } 
    </style> 

Full sample on jsbin