Как быстро разместить изображение на странице усилителя? - PullRequest
Новая
       39

Как быстро разместить изображение на странице усилителя?

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

Поскольку нам нужно определить изображение с тегом amp-img для страницы усилителя, проблема заключается в адаптивном характере этого изображения. Например: 

<p align="center"><amp-img width="400px" height="200px" layout="responsive" src="https://xyx.com/abc.png"></p>

Теперь, если главный div равен 600px, изображение растянется до 600px (больше, чем его обычные 100%), но для мобильного устройства с master div, равным 300px, изображение отрегулирует высоту и будет идеально отлично, так как он будет содержаться в 300px div, растяжение до 100% не даст эффекта. Кроме того, макет не может быть установлен на фиксированный, потому что он будет вытягиваться из мобильного дисплея. Какое решение?

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Если у вас динамическая ширина изображения и вы хотите справиться с этой ситуацией, перейдите по этой ссылке: https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/ и прочитайте раздел «Компоновка с фиксированной высотой с правильными пропорциями». Это поможет вам реализовать amp-img, когда вы не знаете ширину изображения и не хотите растягивать изображение.

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

Вы можете сделать это так:

CSS 

<style amp-custom>
    .magic-img { max-width:400px; margin: 0 auto;}
</style>

HTML 

<div class="magic-img">
   <amp-img width="400" height="200" layout="responsive" src="https://xyx.com/abc.png"/>
</div>
...