Зміна розміру зображення в Markdown


920

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

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

![drawing](drawing.jpg)

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


11
Я пропоную змінити прийняту відповідь на код, сумісний з більшістю інтерпретаторів розмітки (цей, на мою думку, stackoverflow.com/a/21972032/463225 ).
WattsInABox


Microsoft має на своїй сторінці примітку про синтаксис Markdown:! Синтаксис підтримки зміни розміру зображення підтримується лише у запитах на витяг та у Wiki. docs.microsoft.com/en-us/vsts/project/wiki/… Не впевнений, чи цей коментар синтаксису дійсний для всіх розміток або лише для VSTS.
Джо Б

Відповіді:


501

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

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

Ви можете пропустити ВИСОКУ

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

22
також зауважте, що після '=' ви не можете мати пробіл. добре: "! [] (./ pic / pic1s.png = 250x)", bad: "! [] (./ pic / pic1s.png = 250x)"
cantdutchthis

17
Не в стандарті, тому він не працює з кожним аналізатором Markdown
Marius Soutier

19
Здається, це не працює з Redcarpet, який я використовую з Jekyll, тому я б пішов з HTML, як відповів @Tieme. Якщо ви закінчите свій Markdown через аналізатор, який подобається стандарту, HTML буде відновлюватися.
користувач766353

7
також не працює у Bitbucket wiki. він неправильно перетворюється в titleатрибут.
RZKY

6
Не працює, але HTML <img src = http // ... width = "..." height = "..."> працює.
BK Batchelor

979

Ви можете просто використовувати деякі 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; }

42
Використання inline styleне працює на більшості веб-сайтів (напр., GitHub), він буде дезінфікований. Воліють widthі heightзамість того, щоб як було згадано @kushdillip.
Ciro Santilli 冠状 病毒 审查 六四 事件 法轮功

2
Рішення, засноване на атрибуті alt, дуже погано, і ви не повинні використовувати його, він порушує доступність .
Регнареб

Alt в розмітці ставить підписи, alt в html робить щось зовсім інше (додайте текст, якщо фігуру неможливо завантажити).
Жульєн Коломб

Працює на Github з атрибутом width.
Шітал Шах

Я max-width
клав

325

Тут прийнята відповідь не працює з будь-яким редактором Markdown, доступним у таких програмах, як Ghost, Stackedit.io або навіть у редакторі переповнення стека. Я знайшов вирішення тут у трекері випуску StackEdit.io .

Рішення полягає в тому, щоб безпосередньо використовувати синтаксис HTML, і він прекрасно працює:

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

Я сподіваюся, що це допомагає.


11
Це чудово працювало для мене! Вбудований CSS не працював з GitHub Markdown, але "старі школи" атрибути висоти / ширини спрацювали чудово.
Ніколас Крейдберг

Хороша річ, що цей також працює, якщо ви намагаєтесь переглядати розмітку для локальних файлів у розширенні / надбудові браузера.
code_dredd

1
Github це подобається.
Теоман шипахі

1
ти рок-людина! тепер це працює для мене
Весін Алвеш,

Це чудово, за винятком випадків, коли в моїх зошитах ipython в github.
eric

129

Просто використовуйте:

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

замість:

![](Assets/icon.png)

1
У більшості реалізацій Markdown для цього є модифікований синтаксис, тож вам не потрібно вставляти необроблений тег HTML, але це правильно, якщо це не використовується.
Нік МакКерді

1
кривавий геній! працює для GitHub =)))
Віктор Р. Олівейра

Це сумісно в github
thanos.a

Дякую за те, що ви зробили це просто і зміни очевидними.
Марсі

67

Якщо ви пишете 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


1
Це навіть приємніше, ніж безпосередньо вказувати розмір у балах. Я радий, що такий підхід обрав Пандок!
jciloa

2
@ m0z4rt GitHub, ймовірно, не використовує PanDoc для візуалізації MarkDown.
rudolfbyker

63

Можливо, це нещодавно змінилося, але документи 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 з Джекілом та Крамдаун.


7
Можливо, працював у минулому, але зараз не працює на Github. Додавання старомодного тегу <img> із шириною та висотою все ще працює.
piratemurray

2
Це найкраще рішення, якщо ви використовуєте Kramdown або Jekyll (які використовують Kramdown за замовчуванням).
Нік МакКерді

2
Атрибути блоків, як показано тут, - хороший варіант з крамдаундом. Синтаксис тут трохи неправильний, через що у @piratemurray виникають проблеми. Це повинно бути {: height=36 width=36}; це генерує атрибути HTML, тому він не повинен мати pxсуфікс. Крім того, ви можете використовувати css з {: style="height:36px; width:36px"}.
Quantum7

Працює на джекілл! Дякую. Мені навіть не потрібні висота і ширина, достатньо лише одного. ![alt text](image.png){:height="36px" }
Маттіас

1
Мені довелося внести невелику зміну, щоб це нормально працювало в Джекіллі. Відповідь на це питання , як написано виходи мають неправильний формат HTML, як widthі heightатрибути включають в себе «рх» частина. Для мене мені потрібно було скористатися{:height="36" width="36"}
Максиміліан Ламестер

23

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

Відмітка:

![minipic](mypic.jpg)

CSS:

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


13
Це неправильне використання атрибута alt і шкодить доступності.
sbuck

2
Так, це злом, Але все ж здається, що це єдине, що працює над ароматами Markdown. +1 для вказівки на це (у людей, які використовують зчитувачі екрану, виникають проблеми з цим правом? Вони також матимуть проблеми з усіма, хто не переймається правильним використанням Alt).
petermeissner

20

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


17

Якщо ви використовуєте kramdown , ви можете зробити це:

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

Потім додайте це у свій спеціальний CSS :

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

3
Я б рекомендував не встановлювати ширину лише в CSS. Корисно повідомити веб-переглядачу, наскільки великий елемент зображення буде перед завантаженням зображення та таблиці стилів, щоб він міг оптимізувати компонування елементів навколо зображення, не роблячи перезарядки.
Нік МакКерді

13

На основі відповіді Tiemes, якщо ви використовуєте CSS 3, ви можете використовувати селектор підрядків :

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

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

Потім ви можете використовувати тег alt за призначенням для опису зображення.

Відмітка вищезазначеного може бути приблизно такою:

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

Я використовував це у відмітці Ghost, і це працює добре.


1
Також чудово працює на kramdown + jekyll-3.1.2.
Субін Себастьян

Якщо вам не потрібно відображати зображення на повну ширину, краще розмістити розмір пікселів безпосередньо на тезі (а не з CSS).
Нік МакКерді

13

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

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

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

Ось приклад! Я перевірив його на Visual Code та Github. Приклад розмітки


1
Відмінно. Працює з GitLab Enterprise.
Свен Хейле

10

Я прийшов сюди шукати відповідь. Деякі дивовижні пропозиції тут. І інформація про золото, яка вказує на те, що розмітка повністю підтримує HTMl!

Хорошим чистим рішенням завжди є безперечно використання синтаксису html. З тегом.

Але я намагався все-таки дотримуватися синтаксису розмітки, тому спробував обернути його навколо тегу і додав усі потрібні атрибути для зображення всередині тегу div. І це РОБОТА !!

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

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

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


1
Ви не можете помістити уцінки всередині HTML, вам потрібно буде замінити ![chilling](link)з <img src="link" alt="chilling">.
Чарл Крюгер

10

Для тих , хто 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')
```

2
Як я можу змінити і висоту, і ширину? Перший варіант конкретно. Я намагався ввести висоту і ширину в однакові, {}але не вдалося. Окремі {}помилки теж.
НельсонГон

2
@NelsonGon: мені ніколи не потрібно було вказувати обидва, оскільки висота також масштабується, коли задається ширина. Тому я не знаю, чи це було б можливо і як цього досягти. Хороше запитання, хоча ..
symrush

2
Спасибі, я так зрозумів , що я можу зробити це так: {height=x width=y}. Здається, цей синтаксис не розпізнає коми, але я міг би вказати інші атрибути, включаючи елементи стилю.
НельсонГон


9

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

Оскільки багато фотографій завантажено за допомогою сервісу Imgur , ви можете скористатись тут детальним API, щоб змінити розмір фотографії.

Завантажуючи фотографію в коментарі випуску GitHub, вона буде додана через Imgur, тому це дуже допоможе, якщо фотографія дуже велика.

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


7

Ви можете використовувати цей варіант також з kramdown:

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

або

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

Таким чином, ви можете безпосередньо додати довільні атрибути до останнього елемента html. Для додавання класів існує ярлик .class.secondclass .


5

Цей для мене працює, це не в одному рядку, але я сподіваюся, що він працює для вас.

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

Це HTML, а не Markdown ...
MappaM

4

Для R-Markdown жодне з перерахованих вище рішень не працювало для мене, тому я перейшов до звичайного синтаксису LaTeX , який працює чудово.

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

Тоді ви можете використовувати, наприклад, \begin{center}оператор для центрування зображення.


1
+1, але краще тільки \centeringпісля того, \begin{figure}чи нічого, якщо ви використовуєте `\ includegraphics [ширина = \ ширина лінії] {drawing.jpg}` , що я думаю , що повинен бути вихід pandoc за замовчуванням , по крайней мере , коли зображення ширше, ніж текст.
Фран

4

Є спосіб із стилем add class та css

![pic][logo]{.classname}

потім запишіть посилання та css нижче

[logo]: (picurl)

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

Довідка тут


4

Для всіх шукаючих рішень, які працюють у відмітці / знижці 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)робота


3

Додавання відносних розмірів до вихідної URL-адреси відображатиметься у більшості рендерів Markdown.

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

Приклад синтаксису:

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

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

кошеня


Прикро, що він зараз не працює на GitHub, але я б запропонував все-таки підняти запит на функцію.
ддрі

3

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

Я використовую 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>

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


3

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

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

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

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


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


2

Під час використання 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}


1

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

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

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


1

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

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

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

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

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.