Отзывчивый <amp-img> с высотой контейнера

Question

Я хочу поставить небольшую строку <amp-img> на строку текста. Вариант использования - вставка формулы латекса в строке текста. Я знаю ширину и высоту изображения заранее, но я не знаю высоту этой строки текста, так как высота строки отвечает изменениям в размере браузера (большой текст для рабочего стола, меньший текст для мобильных телефонов).

<amp-img layout=responsive> регулирует размер изображения пропорционально ширине контейнера. Есть ли аналогичный механизм, который можно использовать для пропорционального изменения размера изображения в зависимости от высоты контейнера?

Answer 1

Если вы проверите documenatation of AMP относительно отзывчивого макета, размер элемента будет равен ширине его элемента контейнера и автоматически изменит его высоту на соотношение сторон, определяемое атрибутами ширины и высоты. Этот макет работает очень хорошо для большинства элементов AMP, включая amp-img, amp-video. Доступное пространство зависит от родительского элемента и также может быть настроено с использованием max-width CSS.

Проверьте также, @media, что управление макетом страницы выглядит и ведет себя так же, как и на любом другом сайте. Когда окно браузера изменяет размер или ориентацию, медиа-запросы пересматриваются, а элементы скрыты и отображаются на основе новых результатов.

<amp-img 
media="(min-width: 650px)" 
src="wide.jpg" 
width=466 
height=355 
layout="responsive" > 
</amp-img> 

Для получения дополнительной информации с помощью CSS отметьте это SO question.