Как обращаться с изображениями с неопределенным атрибутом высоты и ширины для страниц AMP?

Question

Я пытаюсь создать версии Google AMP страниц, содержащих значительное количество созданных пользователем html.

Существует множество случаев, когда есть теги img, у которых нет атрибута высоты или ширины, а источник изображения - ссылка на внешний URL.

Я думал о том, чтобы сделать запрос к URL-адресу, чтобы получить высоты и ширину изображения, а затем установить атрибуты высоты и ширины, используя эти значения, но это не похоже на правильное решение.

Еще одна вещь, которую я пробовал, - это просто установить высоту и ширину на произвольное значение, а затем попытаться переопределить атрибуты ширины и высоты в таблице стилей, установив amp-img {height:auto;width:auto}, но в этом случае изображение все равно будет отображаться при первоначально объявленном соотношении сторон ,

Но вернемся к моему первоначальному вопросу: как работать с изображениями с неопределенным атрибутом высоты и ширины для страниц AMP? Каков наилучший способ сделать это?

Answer 1

Вы можете использовать следующее:

amp-img { 
    height: 100%; 
    width: 100%; 
    max-width: 100%; 
    max-height: 100%; 
} 

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

Answer 2

В большинстве случаев у вас есть специальное соотношение для изображения. Если вы не имеете реальный размер, но отношение вы можете объявить как:

<amp-img src="image.jpg" width="16" height="9" layout="responsive"></amp-img> 
or 
<amp-img src="image.jpg" width="4" height="3" layout="responsive"></amp-img> 

Ширина и высота только стоимость пространства в макете. И layout="responsive" соответствуют изображению 100% в верхнем слое. Usaly 100% ширина и высота по отношению.