Изменение размера изображения в Markdown


922

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

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

![drawing](drawing.jpg)

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


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

Возможный дубликат центрального изображения
iNet

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

Ответы:


501

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

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

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

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

22
также обратите внимание, что после '=' не должно быть пробела. хорошо: "! [] (./ pic / pic1s.png = 250x)", плохо: "! [] (./ pic / pic1s.png = 250x)"
canthutchthis

17
Не в стандарте, поэтому он не работает с каждым анализатором Markdown
Marius Soutier

19
Кажется, он не работает с Redcarpet, который я использую с Jekyll, поэтому я бы остановился на HTML, как ответил @Tieme. Если вы закончите запускать Markdown через синтаксический анализатор, которому нравится стандарт, HTML-код заработает.
user766353

7
не работает в Bitbucket Wiki. это неправильно преобразуется в titleатрибут.
RZKY

6
Не работает, но HTML <img src = http // ... width = "..." height = "..."> работает.
БК Бэтчелор

981

Вы можете просто использовать 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; }

42
Использование inline styleне работает на большинстве веб-сайтов (например, GitHub) и будет очищено. Предпочитаю widthи heightвместо этого, как упомянуто @kushdillip.
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功

2
Решение, основанное на атрибуте alt, очень плохое, и вы не должны его использовать, оно нарушает доступность .
Regnareb

Alt в markdown ставит подпись, alt в html делает что-то совершенно другое (вставьте текст, если рисунок не может быть загружен).
Жюльен Коломб

Работает на Github с атрибутом ширины.
Шиталь Шах

Я помещал изображение в таблицу, и max-widthвместо этого оно работало лучше, чтобы гарантировать, что изображения не
сжимаются

326

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

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

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

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


11
Это отлично сработало для меня! Встроенный CSS не работал с GitHub Markdown, но атрибуты высоты / ширины «старой школы» работали просто отлично.
Николас Крейдберг

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

1
Github это нравится.
Теоман Шипахи

1
ты рок человек! теперь это работает для меня
Весин Алвес

Это здорово, кроме как в моих записных книжках ipython на github.
Эрик

130

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

<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%;"к HTML <img>тег, или [width=0.5\textwidth]в\includegraphics в LaTeX.

Источник: 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
Атрибуты блока, как показано здесь, являются хорошим вариантом для kramdown. Синтаксис здесь немного неправильный, возможно, поэтому @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-селекторами на основе значений атрибутов. Преимущество состоит в том, что можно легко определить целый набор изображений разных размеров (и других атрибутов).

Markdown:

![minipic](mypic.jpg)

CSS:

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

Разве это не то же самое, что предыдущий ответ Tieme ?
RedGrittyBrick

13
Это неправильное использование атрибута alt и вредит доступности.
sbuck

2
Да, это взлом, НО все еще, кажется, единственное, что работает через ароматы Markdown. +1 за указание на это (у людей, использующих программы чтения с экрана, возникают проблемы с этим, верно? У них также будут проблемы со всеми, кто не утруждает себя правильным использованием alt).
petermeissner


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 Markdown, и это работало хорошо.


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

Для тех, кого интересует 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: мне никогда не требовалось указывать оба, так как высота также масштабируется, когда указана ширина. Поэтому я не знаю, возможно ли это и как этого добиться. Хороший вопрос, хотя ..
symbolrush

2
Спасибо, я так понял , что я могу сделать это так: {height=x width=y}. Кажется, этот синтаксис не распознает запятые, но я мог бы указать другие атрибуты, включая элементы стиля.
NelsonGon


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 [width = \ linewidth] {drawing.jpg}`, который, я думаю, должен быть выводом pandoc по умолчанию, по крайней мере, когда изображение шире текста.
Фран

4

Есть способ добавить класс и стиль 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% } не будет работать !

  • 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)работа


3

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

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

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

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

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

котенок


Жаль, что в настоящее время он не работает на GitHub, но я бы посоветовал поднять запрос на добавление функций.
ддри

3

Изменение размера вложения изображений в 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>

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


3

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

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

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

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


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


2

При использовании колбы (я использую его с плоскими страницами) ... Я обнаружил, что включение явно (не было по умолчанию по какой-то причине) '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}


1

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

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

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


1

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

В моем случае я использую 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.