1

Подскажите, как добиться что б при уменьшении разрешения окна браузера, картинки в amp версии страници были адаптивными ?

<ul class="bl_slots">
  <li class="bl_slots__item">
    <a class="bl_slots__link" href="#">
      <amp-img class="bl_slots__img" src="img/games-list/1.jpg" alt="НАЗВАНИЕ ИГРЫ" width="250" height="280"></amp-img>
      <p>НАЗВАНИЕ ИГРЫ</p>
    </a>
  </li>
  <li class="bl_slots__item">
    <a class="bl_slots__link" href="#">
      <amp-img class="bl_slots__img" src="img/games-list/2.jpg" alt="НАЗВАНИЕ ИГРЫ" width="250" height="280"></amp-img>
      <p>НАЗВАНИЕ ИГРЫ</p>
    </a>
  </li>
  </ul

Столкнулся с проблемой, что поскольку для amp версии необходимо инлайново прописывать размеры ширины и высоты изображения (иначе они вообще не отображаются ) То при уменьшении размера экрана браузера бывают случаи когда картинки налазят друг на друга. введите сюда описание изображения

Как исправить ? *пробовал к amp-img добавлять атрибут layout="responsive" но почему-то тогда картинки исчезают

4 ответа 4

4

Если вы проверите спецификацию примеров АМП для изображений, то в параграфе srcset вы можете видеть следующую информацию (перевод мой):

Используйте srcset для указания разных изображений для изменяемой ширины дисплеев и плотности пикселей.

Далее вы можете видеть пример этого:

<amp-img src="/img/amp.jpg" srcset="/img/amp.jpg 1080w, /img/amp-900.jpg 900w, /img/amp-800.jpg 800w,
/img/amp-700.jpg 700w, /img/amp-600.jpg 600w, /img/amp-500.jpg 500w, /img/amp-400.jpg 400w,
/img/amp-300.jpg 300w, /img/amp-200.jpg 200w, /img/amp-100.jpg 100w" width="1080" height="610" layout="responsive" alt="AMP"></amp-img>

Таким образом каждое ваше изображение должно иметь несколько копий с разными размерами для разных дисплеев. О размерах дисплеев вывода смотрите информацию на GitHub CSS Media Queries for Desktop, Tablet, Mobile.

О элементе srcset вы можете дополнительно смотреть информацию HTML source srcset Attribute - W3Schools.

Кроме того документация АМП для amp-img в параграфе Setting the aspect ratio сообщает (перевод мой):

Для чувствительных изображений, width и height не обязательно соответствовать точной ширине и высоте amp-img. Эти значения просто должны привести к одному и тому же соотношению сторон.

Например, вместо указания width="900"и height="675", вы можете просто указать width="1.33"и height="1".

Более подробную информацию смотрите в руководстве по созданию отзывчивых страниц AMP.

Также вам может быть полезно проверить руководство Гугл о Отзывчивых изображениях.

5
  • Если по клику на картинке открывается image-lightbox - то загрузиться большая картинка?
    – LeonidMew
    17 ноя 2019 в 11:23
  • 1
    Если вы используете элемент srcset, то там откроется изображение размер которого наиболее близко соответствует размеру дисплея пользователя.
    – user220926
    18 ноя 2019 в 13:47
  • Это вроде явно в документации не сказано, но первоначально будет загружено то что в src, даже если совсем не подходит под размеры, а srcset имеет подходящие размеры. Получается srcset только под lightbox, или я что-то делаю не так? Страницы не в cdn гугла, может в этом дело. Комментарии не для дискуссий, но если что-то выясним здесь то я оформлю отдельный вопрос.
    – LeonidMew
    22 ноя 2019 в 7:06
  • 1
    Вначале браузер проверяет наличие мета viewport и его значение, которое браузер соотносит с размером экрана ввода информации пользователя. Затем используя эти данные браузер ищет наиболее подходящее значение из элемента srcset. Если браузер не найдет там подходящее изображение или браузер игнорирует этот элемент, то он использует значение элемента src, который по сути есть вспомогательный элемент. Отсутствие CDN Google не есть препятствие для браузеров.
    – user220926
    23 ноя 2019 в 9:14
  • Есть вьюпорт вот такой: <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> Тестировал в десктопных браузерах фф и хром в режиме responsive design. Загружаю страницу и проверяю свойства изображения и там что-то типа 800х600 scaled to 300х200
    – LeonidMew
    23 ноя 2019 в 9:32
1

layout="responsive" меняет размер изображения под размер контейнера. причем даже реальные размеры указывать нет необходимости, достаточно только пропорции например ширина=1 высота=1.33. поместите их в div с обозначенными размерами, без размеров контейнера изображение исчезает, как вы заметили. Для контейнера достаточно указать ширину, например как в следующем абзаце.

Еще вариант layout="intrinsic" с шириной и высотой, внутри div со стилями типа width: 360px; max-width: 50%; изображение будет шириной 360px пока это меньше 50% экрана. При уменьшении экрана изображение будет уменьшатся с сохранением пропорций.

В принятом ответе предлагается использовать srcset, что не имеет отношения к вопросу, но это полезный атрибут, используйте при возможности. Посмотрите в Гугл аналитике какие разрешения используют ваши пользователи и создайте под них уменьшенные копии. У меня самые популярные шириной 360, 375, 320.

0

amp-img width = % height = % ну и другим тегам дать ширину и высоту в процентах

0

Добавьте CSS:

<style>
amp-img.contain img {
    object-fit: contain;
}
</style>

Добавьте в HTML атрибут layout="fill" и класс contain к тегу amp-img:

<ul class="bl_slots">
  <li class="bl_slots__item">
    <a class="bl_slots__link" href="#">
      <amp-img class="bl_slots__img contain" src="img/games-list/1.jpg" alt="НАЗВАНИЕ ИГРЫ" layout="fill"></amp-img>
      <p>НАЗВАНИЕ ИГРЫ</p>
    </a>
  </li>
  <li class="bl_slots__item">
    <a class="bl_slots__link" href="#">
      <amp-img class="bl_slots__img contain" src="img/games-list/2.jpg" alt="НАЗВАНИЕ ИГРЫ" layout="fill"></amp-img>
      <p>НАЗВАНИЕ ИГРЫ</p>
    </a>
  </li>
</ul>
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.