Question

我的amp-image-lightbox存在问题。我当前的图像标签指向全尺寸图像的裁剪图像。在桌面上，点击时的任何裁剪图像都会在灯箱中以完整尺寸显示。有没有办法让AMP页面使用amp-image-lightbox以相同的方式工作？

我设法让它工作，但我看到灯箱中的裁剪图像不是完整尺寸的图像

Answer 1

不确定这是否可以使用amp-image-lightbox。但是，使用amp-lightbox很容易实现相同的行为：

<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

带有裁剪图像的amp-image-lightbox问题

1 个答案: