與裁剪圖像的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