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

Документація дає лише такі пропозиції щодо зображення:

![drawing](drawing.jpg)

Якщо можливо, я б хотів, щоб малюнок також був зосереджений. Я прошу загального Markdown, а не лише того, як це робить GitHub.

З певними реалізаціями Markdown (включаючи Mou та Marked 2 (лише macOS)) ви можете додавати =WIDTHxHEIGHTпісля URL-адреси графічного файлу, щоб змінити розмір зображення. Не забувайте місця перед =.

![](./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, як описано у цій відповіді щодо розмітки та вирівнювання зображення

![drawing](drawing.jpg)

CSS в іншому файлі:

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

Тут прийнята відповідь не працює з будь-яким редактором Markdown, доступним у таких програмах, як Ghost, Stackedit.io або навіть у редакторі переповнення стека. Я знайшов вирішення тут у трекері випуску 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%;"до <img>тегу HTML або [width=0.5\textwidth]до \includegraphicsLaTeX.

Джерело: 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-селекторами на основі значень атрибутів. Перевага полягає в тому, що можна легко визначити цілий набір різних розмірів зображення (та подальших атрибутів).

Відмітка:

![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, і це працює добре.

Поєднуючи дві відповіді, я вийшов із рішенням, яке може виглядати не так красиво,
але це працює!

Він створює мініатюру з певним розміром, яку можна натиснути, щоб привести вас до зображення максимальної роздільної здатності.

[<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>

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

Просто подумав, що я викладу це там, оскільки його немає ні в одній з відповідей. :)

Для тих , хто intereseted в 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}оператор для центрування зображення.

Є спосіб із стилем add class та 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% } не буде працювати !

• Додавати { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Примітка: {:height="36px" width="36px"} двокрапка, як від @sayth, здається, не працює з відміткою R

Не працює:

• Додавати =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)

Приклад кошеня:

Змінення розміру додаток до зображень у ноутбуці Юпітера

Я використовую jupyter_core-4.4.0& jupyter notebook.

Якщо ви додаєте свої зображення, вставляючи їх у розмітку так:

![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>
<img src="attachment:Screen%20Shot%202019-08-06%20at%201.48.10%20PM.png" width="500"/>
</div>

Сподіваюся, це допомагає!

Для подальшої довідки:

Реалізація розмітки для Joplin дозволяє контролювати розмір імпортованих зображень таким чином:

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

Ця функція була запрошена тут і , як обіцяв на Лорану це було реалізовано.

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

Під час використання Flask (я використовую його з рівними сторінками) ... я виявив, що включення явного (не за замовчуванням чомусь) "attr_list" у розширеннях у рамках виклику до розмітки робить трюк - і тоді можна використовувати атрибути (дуже корисно також для доступу до CSS - 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 .

Попередній перегляд надає зображення, значки, HTML тощо

Якщо зміна початкової відмітки для вас не є можливою, цей злом може працювати:

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

Я використовував це, щоб мати змогу змінити розмір зображень, перш ніж надсилати їх електронною поштою (оскільки Outlook ігнорує будь-які стилі CSS-зображення)

Відповідь Тієма найкраща для більшості випадків.

У моєму випадку я використовую pandoc для перетворення розмітки в латекс. Тут не працюватимуть теги HTML.

Моє рішення - повторна реалізація \includegraphics

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

Аналогічно використанню CSS після перетворення в HTML.