Добавление пользовательского стиля CSS в img

В настоящее время я использую тему материала Hugo: https://github.com/digitalcraftsman/hugo-material-docs

Когда я пишу следующую уценку контента

![practice-signup-1](/images/practice-signup-1.png)

Hugo сгенерирует следующий HTML-код

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1"></p>

Однако я хочу добавить следующий стиль в свой тег img

<p><img src="https://investing.jstock.co/images/practice-signup-1.png" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

Мне было интересно, как я могу добиться этого?


markdown hugo
person Cheok Yan Cheng    schedule 16.08.2017    source источник
comment
Возможный дубликат Как изменить размер изображения Markdown?   -  person Waylan    schedule 17.08.2017
comment
Также возможно дубликат Как использовать CSS в Markdown?   -  person Waylan    schedule 17.08.2017

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете создать для него шорткод.

Создайте свой собственный шорткод в /themes/your-theme-dir/layouts/shortcodes/img.html.

<p><img src="{{ .Get 0 }}" alt="practice-signup-1" style="max-width: 100%; width: 50%; height: auto;"></p>

а затем используйте этот короткий код в своем сообщении:

{{< img https://investing.jstock.co/images/practice-signup-1.png >}}

В противном случае вы можете добавить стиль в файл css вместо создания встроенного стиля.

person Dian    schedule 22.08.2017

arrow_upward
2
arrow_downward

Вы можете поместить необработанный HTML в файлы уценки. Поэтому, если у вас есть изображение, для которого вы хотите использовать специальные стили, просто вставьте код <img src.. в файл уценки.

person Robin Hu    schedule 03.09.2017