Я только начал с Markdown. Мне это нравится, но меня беспокоит одна вещь: как я могу изменить размер изображения с помощью Markdown?

Документация дает только следующее предложение для изображения:

![drawing](drawing.jpg)

Если это возможно, я бы хотел, чтобы изображение также было отцентрировано. Я прошу об общей уценке, а не о том, как это делает GitHub.

В некоторых реализациях Markdown (включая Mou и Marked 2 (только macOS)) вы можете добавить =WIDTHxHEIGHTURL-адрес графического файла для изменения размера изображения. Не забудьте про пространство перед =.

![](./pic/pic1_50.png =100x20)

Вы можете пропустить ВЫСОТУ

![](./pic/pic1s.png =250x)

Вы можете просто использовать HTML в вашей Markdown:

<img src="drawing.jpg" alt="drawing" width="200"/>

Или через styleатрибут ( не поддерживается GitHub )

<img src="drawing.jpg" alt="drawing" style="width:200px;"/>

Или вы можете использовать пользовательский файл CSS, как описано в этом ответе на Markdown и выравнивание изображения

![drawing](drawing.jpg)

CSS в другом файле:

img[alt=drawing] { width: 200px; }

Принятый ответ здесь не работает ни с одним редактором Markdown, доступным в приложениях, которые я использовал до настоящего времени, таких как Ghost, Stackedit.io или даже в редакторе Stack Overflow. Я нашел обходной путь здесь в трекере проблем StackEdit.io .

Решение состоит в том, чтобы напрямую использовать синтаксис HTML, и он отлично работает:

<img src="http://....jpg" width="200" height="200" />

Надеюсь, это поможет.

Просто используйте:

<img src="Assets/icon.png" width="200">

вместо:

![](Assets/icon.png)

Если вы пишете MarkDown для PanDoc, вы можете сделать это:

![drawing](drawing.jpg){ width=50% }

Это добавляет style="width: 50%;"к HTML <img>тег, или [width=0.5\textwidth]в\includegraphics в LaTeX.

Источник: http://pandoc.org/MANUAL.html#extension-link_attributes

Возможно, это недавно изменилось, но документы Kramdown показывают простое решение.

Из документов

Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}.

And here is a referenced ![smile]

[smile]: smile.png
{: height="36px" width="36px"}

Работает на GitHub с Джекилом и Крамдауном.

Можно использовать altатрибут, который можно установить почти во всех реализациях / рендерах Markdown вместе с CSS-селекторами на основе значений атрибутов. Преимущество состоит в том, что можно легко определить целый набор изображений разных размеров (и других атрибутов).

Markdown:

![minipic](mypic.jpg)

CSS:

img[alt="minipic"] { 
  max-width:  20px; 
  display: block;
}

Заменить ![title](image-url.type)на<img src="https://image-url.type" width="200" height="200">

Если вы используете kramdown , вы можете сделать это:

{:.foo}
![drawing](drawing.jpg)

Затем добавьте это в ваш пользовательский CSS :

.foo {
  text-align: center;
  width: 100px;
}

Основываясь на ответе Tiemes, если вы используете CSS 3, вы можете использовать селектор подстроки :

Этот селектор будет сопоставлять любое изображение с тегом alt, оканчивающимся на '-fullwidth':

img[alt$="-fullwidth"]{
  width:  100%;
  display: block;
}

Тогда вы все еще можете использовать тег alt по назначению для описания изображения.

Уценка для вышеупомянутого может быть что-то вроде:

![Picture of the Beach -fullwidth](beach.jpg)

Я использовал это в Ghost Markdown, и это работало хорошо.

Объединив два ответа, я нашел решение, которое может показаться не таким красивым,
но оно работает!

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

[<img src="image.png" width="250"/>](image.png)

Вот пример! Я проверил это на Visual Code и Github.

Я пришел сюда в поисках ответа. Некоторые удивительные предложения здесь. И золотая информация, указывающая на то, что уценка полностью поддерживает HTMl!

Хорошее чистое решение всегда должно идти с чистым синтаксисом HTML наверняка. С тегом.

Но я все еще пытался придерживаться синтаксиса уценки, поэтому я попытался обернуть его вокруг тега и добавил любые атрибуты, которые я хотел, для изображения внутри тега div. И это работает !!

<div style="width:50%">![Chilling](https://www.w3schools.com/w3images/fjords.jpg)</div>

Таким образом, внешние изображения поддерживаются!

Просто подумал, что я это изложу, поскольку это не входит ни в один из ответов. :)

Для тех, кого интересует rmarkdownи knitrрешение. Есть несколько способов изменить размер изображения в .rmdфайле без использованияhtml :

Вы можете просто указать ширину изображения, добавив {width=123px}. Не вводите пробелы между скобками:

![image description]('your-image.png'){width=250px}

Другой вариант заключается в использовании knitr::include_graphics:

```{r, fig.cap="image description", out.width = '50%'}
knitr::include_graphics('your-image.png')
```

Я написал скрипт парсера простых тегов для использования тега img нестандартного размера в Jekyll .

https://gist.github.com/nurinamu/4ccf7197a1bdfb0d7079

{% img /path/to/img.png 100x200 %}

Вы можете добавить файл в _pluginsпапку.

Я знаю, что этот ответ немного конкретен, но он может помочь другим нуждающимся.

Поскольку многие фотографии загружаются с помощью сервиса Imgur , вы можете использовать API, подробно здесь чтобы изменить размер фотографии.

При загрузке фотографии в комментарии к проблеме GitHub, она будет добавлена ​​через Imgur, так что это очень поможет, если фотография очень большая.

По сути, вместо http://i.imgur.com/12345.jpg вы бы поместили http://i.imgur.com/12345m.jpg для изображения среднего размера.

Вы также можете использовать это с kramdown:

markdown
![drawing](drawing.jpg)   
{:.some-css-class style="width: 200px"}

или

markdown
![drawing](drawing.jpg)   
{:.some-css-class width="200"}

Таким образом, вы можете напрямую добавлять произвольные атрибуты в последний элемент HTML. Для добавления классов есть ярлык .class.secondclass .

Это работает для меня, это не в одной строке, но я надеюсь, что это работает для вас.

<div>
<img src="attachment:image.png" width="500" height="300"/>
</div>

Для R-Markdown ни одно из перечисленных выше решений не сработало для меня, поэтому я обратился к обычному синтаксису LaTeX , который работает просто отлично.

\begin{figure}
 \includegraphics[width=300pt, height = 125 pt]{drawing.jpg}
\end{figure}

Затем вы можете использовать, например, \begin{center}заявление, чтобы центрировать изображение.

Есть способ добавить класс и стиль CSS

![pic][logo]{.classname}

затем запишите ссылку и CSS ниже

[logo]: (picurl)

<style type="text/css">
    .classname{
        width: 200px;
    }
</style>

Ссылка здесь

Для всех, кто ищет решения, которые работают в R уценке / уценке , эти предыдущие решения работают / не работают или нуждаются в небольшой адаптации:

За работой

• Добавить { width=50% }или{ width=50% height=50% }

  • ![foo](foo.png){ width=50% }

  • ![foo](foo.png){ width=50% height=50% }

  • Важно: без запятой между шириной и высотой - т.е. { width=50%, height=30% } не будет работать !

• Append { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Примечание: {:height="36px" width="36px"} с двоеточием, как в @sayth, похоже, не работает с R уценкой

Не работает:

• Append =WIDTHxHEIGHT
  • после URL графического файла, чтобы изменить размер изображения (как от @prosseek)
  • ни =WIDTHxHEIGHT ![foo](foo.png =100x20)не =WIDTHтолько ![foo](foo.png =250x)работа

Если вы используете образы эталонного стиля Github :

Here is an image of tree: 
![alt text][tree]{height=400px width=500px}


[//]: # (Image References)
[tree]: ./images/tree.png "This is a tree"

Добавление относительных измерений к исходному URL будет отображаться в большинстве средств визуализации Markdown.

Мы реализовали это в Corilla, так как я думаю, что этот шаблон соответствует ожиданиям существующих рабочих процессов, не заставляя пользователя полагаться на базовый HTML. Если ваш любимый инструмент не следует похожему шаблону, стоит запросить функцию.

Пример синтаксиса:

![a-kitten.jpg](//corilla.com/a-kitten-2xU3C2.jpg =200x200)

Пример котенка:

Изменение размера вложения изображений в Markdown в ноутбуке Jupyter

Я использую jupyter_core-4.4.0ноутбук Jupyter.

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

![Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png](attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png)

Эти attachmentссылки не работают:

<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>

ДЕЛАЙ ЭТО . Это делает работу.

Просто добавьте скобки div.

<div>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>

Надеюсь это поможет!

Для дальнейшего использования:

Реализация Markdown для Joplin позволяет контролировать размер импортируемых изображений следующим образом:

<img src=":/7653a812439451eb1803236687a70ca" width="450"/>

Эта функция была запрошена здесь и , как обещал на Лоране это было реализовано.

Мне потребовалось некоторое время, чтобы придумать конкретный ответ Джоплина.

При использовании колбы (я использую его с плоскими страницами) ... Я обнаружил, что включение явно (не было по умолчанию по какой-то причине) 'attr_list' в расширениях внутри вызова markdown делает свое дело - и тогда можно использовать атрибуты (очень полезно также для доступа к CSS - class = "my class", например ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

и функция:

def prerender_jinja(text):
    prerendered_body = render_template_string(Markup(text))
    pygmented_body   = markdown.markdown(prerendered_body, extensions=['codehilite', 'fenced_code', 'tables', 'attr_list'])
    return pygmented_body

А потом в уценке:

![image](https://octodex.github.com/images/yaktocat.png "This is a tooltip"){: width=200px}

Для пользователей IntelliJ IDEA , пожалуйста, обратитесь к Markdown Navigator плагину .

Предварительный просмотр отображает изображения, значки, HTML и т. Д.

Если изменение начальной уценки не вариант для вас, этот хак может сработать:

newHtml = oldHtml.replace(/<img/g, '<img height="100"');

Я использовал это, чтобы иметь возможность изменять размеры изображений перед отправкой их по электронной почте (поскольку Outlook игнорирует любые стили CSS для изображений)

Ответ Tieme является лучшим для большинства случаев.

В моем случае я использую pandoc для конвертации уценки в латекс. HTML-теги не будут работать здесь.

Мое решение состоит в том, чтобы повторно реализовать \includegraphics

\let\maxincludegraphics\includegraphics
\renewcommand{\includegraphics}[1]{\maxincludegraphics[max width=\textwidth]{#1}}

Аналогично использованию CSS после преобразования в HTML.