Możesz po prostu użyć jakiegoś HTML w Markdown:

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

Or via style attribute (not supported by GitHub )

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

Lub możesz użyć niestandardowego pliku CSS, jak opisano w tej odpowiedzi na Markdown i wyrównanie obrazu

![drawing](drawing.jpg)

CSS w innym pliku:

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

Zaakceptowana odpowiedź nie działa z żadnym edytorem Markdown dostępnym w aplikacjach, których używałem do tej pory, takich jak Ghost, Stackedit.io lub nawet w edytorze StackOverflow. Znalazłem obejście tutaj w StackEdit.io issue tracker .

Rozwiązaniem jest bezpośrednie użycie składni HTML i działa doskonale:

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

Po prostu użyj:

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

Zamiast:

![](Assets/icon.png)

Jeśli piszesz MarkDown dla PanDoc, możesz to zrobić:

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

To dodaje style="width: 50%;" do znacznika HTML <img> lub [width=0.5\textwidth] do \includegraphics w Latexie.

Źródło: http://pandoc.org/MANUAL.html#extension-link_attributes

Może to się ostatnio zmieniło, ale dokumenty Kramdown pokazują proste rozwiązanie.

Z docs

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

And here is a referenced ![smile]

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

Działa na GitHubie z Jekyllem i Kramdown.

Łącząc dwie odpowiedzi wyszedłem z rozwiązaniem, które może nie wyglądać tak ładnie,
ale to działa!

Tworzy miniaturę o określonym rozmiarze, który można kliknąć, aby uzyskać obraz o maksymalnej rozdzielczości.

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

Zastąp ![title](image-url.type) Na <img src="https://image-url.type" width="200" height="200">

Można narysować na alt atrybut , który można ustawić w prawie wszystkich implementacjach/rendererach Markdown wraz z selektorami CSS na podstawie wartości atrybutów. Zaletą jest to, że można łatwo zdefiniować cały zestaw różnych rozmiarów obrazu (i dalszych atrybutów).

Markdown:

![minipic](mypic.jpg)

CSS:

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

Jeśli używasz kramdown , możesz to zrobić:

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

Następnie dodaj to do Twojego niestandardowego CSS :

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

Bazując na Tiemes answer, jeśli używasz CSS 3 możesz użyć selektora substring :

Ten selektor dopasuje dowolny obraz z znacznikiem alt, który kończy się na'- fullwidth':

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

Następnie możesz nadal używać znacznika alt dla jego zamierzonego celu do opisania obrazu.

Markdown dla powyższego może być coś w stylu:

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

Jeśli używasz reference style images in Gihubs Markdown :

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


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

Przyszedłem tu, szukając odpowiedzi. Kilka wspaniałych propozycji tutaj. I złota informacja wskazująca, że markdown obsługuje HTMl całkowicie!

Dobrym, czystym rozwiązaniem jest zawsze stosowanie czystej składni html. Z metką.

Ale próbowałem nadal trzymać się składni markdown, więc próbowałem owijać ją wokół znacznika i dodawać dowolne atrybuty obrazu wewnątrz znacznika div. I to działa!!

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

Więc w ten sposób zewnętrzne obrazy są obsługiwane!

Dla zainteresowanych rozwiązaniem rmarkdown i knitr. Istnieje kilka sposobów zmiany rozmiaru obrazów w pliku .rmd bez użycia html:

Możesz po prostu określić szerokość obrazu, dodając {width=123px}. Nie wprowadzaj spacji między nawiasami:

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

Inną opcją jest użycie knitr::include_graphics:

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

To działa dla mnie to nie jest w jednej linijce ale mam nadzieję, że działa dla Ciebie.

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

Stworzyłem skrypt prostego parsera tagów do używania niestandardowego znacznika img w Jekyll .

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

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

Możesz dodać plik do folderu _plugins.

Wiem, że ta odpowiedź jest trochę konkretna, ale może pomóc innym w potrzebie.

Ponieważ wiele zdjęć jest przesyłanych za pomocą usługi Imgur, możesz użyć interfejsu API opisanego tutaj, Aby zmienić rozmiar zdjęcia.

Podczas przesyłania zdjęcia w komentarzu do wydania GitHub, zostanie ono dodane przez Imgur, więc to bardzo pomoże, jeśli zdjęcie jest bardzo duże.

W zasadzie zamiast http://i.imgur.com/12345.jpg , można by umieścić http://i.imgur.com/12345m.jpg dla średniej wielkości obrazu.

Możesz użyć tego również z kramdown:

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

Lub

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

W ten sposób możesz bezpośrednio dodać dowolne atrybuty do ostatniego elementu html. Aby dodać klasy należy użyć skrótu .klasy.secondclass .

Dla wszystkich poszukujących rozwiązań, które działają w R markdown/ bookdown, te z poprzednich rozwiązań nie działają/nie wymagają lekkiego dostosowania:

Praca

• Append { width=50% } or { width=50% height=50% }

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

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

  • Ważne: brak przecinka między szerokością a wysokością – tzn. { width=50%, height=30% } nie zadziała.!

• Dołącz { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Uwaga: {:height="36px" width="36px"} z dwukropkiem, jak z @sayth, wydaje się nie działać z R markdown

Nie działa:

• Append =WIDTHxHEIGHT
  Po dodaniu adresu URL pliku graficznego, aby zmienić rozmiar obrazu (od @prosseek)
• ani =WIDTHxHEIGHT ![foo](foo.png =100x20) nor =WIDTH only ![foo](foo.png =250x) work

Dla R-Markdown, żadne z powyższych rozwiązań nie działało dla mnie, więc zwróciłem się do zwykłej składni LaTeX, która działa dobrze.

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

Następnie możesz użyć np. instrukcji \begin{center} do wyśrodkowania obrazu.

Istnieje możliwość dodania klasy i stylu css

![pic][logo]{.classname}

Następnie Zapisz link i css poniżej

[logo]: (picurl)

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

Reference Here

Do wykorzystania w przyszłości:

Implementacja Markdown dla Joplin pozwala kontrolować rozmiar importowanych obrazów w następujący sposób:

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

Ta funkcja została poproszona tutaj i jak obiecał przez Laurent została ona zaimplementowana.

Zajęło mi trochę czasu, aby dowiedzieć się Joplin konkretną odpowiedź.

Dodanie względnych wymiarów do źródłowego adresu URL będzie renderowane w większości rendererów Markdown.

Zaimplementowaliśmy to w Corilla, ponieważ myślę, że wzór jest taki, który podąża za oczekiwaniami istniejących przepływów pracy bez zmuszania użytkownika do polegania na podstawowym HTML. Jeśli Twoje ulubione narzędzie nie podąża za podobnym wzorcem, warto zgłosić prośbę o funkcję.

Przykład składni:

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

Przykład kotka:

Zmiana rozmiaru załączników Markdown w Notatniku Jupyter

używam notatnika jupyter_core-4.4.0 & jupyter.

Jeśli dołączasz swoje obrazy, wstawiając je do markdown w następujący sposób:

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

Te attachment Linki nie działają:

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

ZRÓB TO . To Działa .

Wystarczy dodać nawiasy div.

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

Przy użyciu kolby (używam jej z płaskimi kartkami)... Odkryłem, że włączenie jawnie (nie było domyślnie z jakiegoś powodu) 'attr_list' w rozszerzeniach w ramach wywołania markdown robi sztuczkę - i wtedy można użyć atrybutów (bardzo przydatne również, aby uzyskać dostęp do CSS-class= "my class" na przykład...).

FLATPAGES_HTML_RENDERER = prerender_jinja

Oraz funkcja:

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

A następnie w Markdown:

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

Jeśli zmiana początkowego znacznika nie jest dla Ciebie opcją, Ten hack może zadziałać:

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

Użyłem tego, aby móc zmienić rozmiar obrazów przed wysłaniem ich w wiadomości e-mail (ponieważ Outlook ignoruje wszelkie style CSS obrazu)

Dla użytkowników IntelliJ IDEA należy zapoznać się z wtyczką Markdown Navigator.

Podgląd renderuje obrazy, znaczniki, HTML itp.

Odpowiedź Tieme ' a jest najlepsza w większości przypadków.

W moim przypadku używam pandoc do konwersji markdown na latex. Znaczniki HTML nie będą tutaj działać.

Moim rozwiązaniem jest ponowne wdrożenie \includegraphics

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

Jest analogiczne do używania CSS po konwersji do HTML.

Try:

![image|<SCALE(64x64)>](IMG_URL)

Przykład:

![image|12x12](https://www.flaticon.com/svg/vstatic/svg/497/497738.svg?token=exp=1611421025~hmac=7f2922952f84017ad7e06a850bb5ce66)

Jeśli używamy zwykłego znacznika obrazu HTML, to działa. Używam tego w stronie internetowej wykonanej z Jekyll.

<img class="img-fluid" src="./img/face.jpg" alt="img-verification">

Jeśli dodamy klasy bootstrap jak w tym przykładzie to działa dobrze.