Как стилизовать ширину и высоту amp-img - PullRequest
Новая
       7

Как стилизовать ширину и высоту amp-img

0 голосов
/ 28 августа 2018

Можно ли стилизовать ширину, высоту amp-img?

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

Попробовал следующее: 

 <style amp-custom>
    amp-img {
    vertical-align:top;
    width:30px;
    height:30px;
    }

    .bold{
    font-weight:bold
    }
 </style amp-custom>

   Tap
    <amp-img alt="Add" layout="fill" src="@Url.Content("~/Content/appbar.add.rest.png")"></amp-img>
    and choose one of the following actions:

Проходит проверку AMP, но изображение не отображается. Если layout = "fill" удален, изображение показывается, но не проходит проверку AMP.

1 Ответ

0 голосов
/ 28 августа 2018

Отсутствие заполнения (ширина, высота или макет) вынуждает AMP предполагать, что тип макета равен container, который не поддерживается типом макета amp-img. Поэтому, как минимум, вы должны указать макет. Если вы просто хотите указать макет, а затем использовать CSS, чтобы указать ширину и высоту, вы можете использовать fill.

Затем вы можете использовать CSS для ссылки amp-img и указать ширину и высоту. 

amp-img { width: 300px; height: 200px }

См. Справочную страницу amp-img для получения дополнительной информации о поддерживаемых макетах.

Поддерживаемые макеты: заливка, фиксированная, фиксированная высота, flex-item, внутренняя, нодисплей, отзывчивый

Чтобы узнать больше о том, что означает каждый тип макета, ознакомьтесь с макетом и медиазапросами .

...