AMP carousel - проблема с адаптивным размером изображения - PullRequest
Новая
       22

AMP carousel - проблема с адаптивным размером изображения

0 голосов
/ 20 сентября 2018

Я начал свой путь с 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/

Solution

Правильно ли это сделано (i-amphtml - это внутренние определения AMP CSS, редакция не допускается).В соответствии с этим документом 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;
    }

Объятие amp-img с div с классом css .fullscreen-без заголовка:

Фиксированная ширина и высота в ампер-карусели дляоригинальный размер изображения

Изменить макет тегов img для заполнения Удалить класс mb4 из тега рисунка

Удалить определение CSS

.amp-carousel-slide> .i-amphtml-replace-content {object-fit: cover;-о-объект-посадка: чехол;}

Моя скрипка: https://jsfiddle.net/tmdoit/726m1rnt/14/

Более поздние модификации:

  1. Из-за информации для проверки«Чтобы улучшить производительность прокрутки в Safari, теперь мы перемещаем элемент в слой с фиксированным позиционированием:« Я добавил к строке определения body css:

    padding-top: 3.5rem;

...