Question

我从AMP开始旅程，但一开始失败-响应式图像轮播。

我想在轮播中获得适当调整尺寸的图像，使其达到设备尺寸，例如下面的波纹管（不带轮播）示例：

响应式AMP图像片段：

    <amp-img width="404" height="720" alt="Welcome to Beck &amp; Galo Modern American Cuisine" layout="responsive" src="https://image.ibb.co/gquGSK/hero1.jpg" media="(max-width: 415px)"></amp-img>

我的小提琴：https://jsfiddle.net/tmdoit/Lcno1067

在解决问题之后，我最终遇到了这个问题：

AMP轮播片段：

  <amp-carousel width="400"
      height="720"
      layout="responsive"
      type="slides"
      autoplay
      media="(max-width: 415px)"
      delay="2000">
      <amp-img width="400" height="720" alt="Welcome to Beck &amp; Galo Modern American Cuisin e" layout="responsive"
        src="https://image.ibb.co/gquGSK/hero1.jpg"></amp-img>
      <amp-img width="400" height="720" alt="Welcome to Beck &amp; Galo Modern American Cuisin e" layout="responsive"
        src="https://image.ibb.co/czCguz/hero2.jpg"></amp-img>
  </amp-carousel>

我的小提琴：https://jsfiddle.net/tmdoit/726m1rnt/

有什么想法可以解决吗？

~~解决方案~~

在CSS之下添加即可解决问题。

.amp-carousel-slide > .i-amphtml-replaced-content {
  object-fit: cover;
  -o-object-fit: cover;
}

我的小提琴：https://jsfiddle.net/tmdoit/726m1rnt/10/

解决方案

使用正确的方式（i-amphtml是内部CSS AMP定义，不允许版本）。根据这份文档https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/，我做了一些修改：

1。添加了CSS样式

    .fullscreen-without-header {
        position: relative;
        width: 100vw;
        height: calc(100vh - 3.5rem);
    }

    amp-carousel {
        height: 100vh;
        max-height: calc(100vh - 3.5rem);
    }

    amp-img img {
        object-fit: cover;
    }

使用css类.fullscreen-without-header的div拥抱amp-img：
将安培转盘的宽度和高度固定为原始图像大小
更改img标签的布局以填充
从人物标签中删除mb4类
删除CSS定义

.amp-carousel-slide> .i-amphtml-replaced-content { 适合对象：封面； -o-object-fit：封面； }

我的小提琴：https://jsfiddle.net/tmdoit/726m1rnt/14/

以后的修改：

由于验证信息“为了提高Safari中的滚动性能，我们现在将元素移动到固定的定位层：”，我已经在body CSS定义行中添加了

padding-top：3.5rem;

AMP轮播-响应式图像尺寸问题

0 个答案: