Как правильно установить атрибуты ширины и высоты для amp-img

Question

Я сейчас в процессе создания своего сайта AMP -описанный мой сайт построен в бутстрапе, и все реагирует так, что большинство моих изображений, которые я только что установил:

img{ 
    width:100%; 
    height:auto; 
} 

Однако проблема им нарваться с моей amp-img является то, что она требует width и height быть установлен на изображении. Каков правильный способ делать отзывчивые изображения с amp, так или иначе, чтобы сделать это без установки height и width?

Answer 1

Не зная ширину или высоту изображения, вы можете показать его только в виде l ayout attribute fill и обернуть его в элемент с добавлением, который содержит следующие css property object-fit.

.ampImg__Wrapper { 
    object-fit: contain; 
} 

Answer 2

amp An требует размеров быть в теге по причине

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

Это, как говорится, просто положить органические размеры изображения в теге и использовать два следующих свойств в вашем CSS, чтобы убедиться, что изображения играют хорошо

(убедитесь, что вы добавили селектор курса)

{ 
 
    max-width: 100%; 
 
    height: auto; 
 
}

Answer 3

способ AMP достичь ТНА t, используя атрибут layout. В amp-img указывается источник, родной высота и вес; sourceet с форматами, в «css-пикселях» (например, 96 пикселей/дюйм) для вашего отзывчивого изображения с layout= responsive, и все готово. AMP будет поддерживать соотношение h/w.

Ex.

<amp-img 
    src="/img/small.jpg" 
    srcset="/img/medium.jpg 640w, 
      /img/small.jpg 320w" 
    width="1800" 
    height="2777" 
    layout="responsive" 
    alt="Don't forget to add one"> 
</amp-img> 

В этом примере layout="responsive" будет выведено двигателем AMP, поскольку размер и формат изображения указаны. Когда высота и ширина не определены, макет по умолчанию является «контейнером» (например, равным div).

В amp-img также можно включить amp-медиа-запросы. Предыдущий пример может быть установлен следующим образом:

<amp-img 
    media="(max-width: 639px)" 
    src="/img/small.jpg" 
    width="450" 
    height="694" 
    layout="responsive" 
    alt="Don't forget to add one"> 
</amp-img> 
<amp-img 
    media="(min-width: 639px)" 
    src="/img/medium.jpg" 
    width="900" 
    height="1388" 
    layout="responsive" 
    alt="Don't forget to add one"> 
</amp-img> 

В этом случае атрибут «медиа» будет иметь приоритет над адаптивным выбором (но это не делает почти никаких практических различий, за исключением, если вы хотите, чтобы определенный образ на определенный размер экрана).

Хороший обзор: https://www.ampbyexample.com/advanced/layout_system/

Надежда эта помощь