Właśnie zacząłem z Markdown. Uwielbiam to, ale jedno mnie denerwuje: jak mogę zmienić rozmiar obrazu za pomocą Markdown?

Dokumentacja zawiera tylko następujące sugestie dotyczące obrazu:

![drawing](drawing.jpg)

Jeśli to możliwe, chciałbym, aby zdjęcie również było wyśrodkowane. Proszę o ogólny Markdown, a nie tylko o to, jak GitHub to robi.

W przypadku niektórych implementacji Markdown (w tym Mou i Marked 2 (tylko macOS)) możesz dołączyć =WIDTHxHEIGHTpo adresie URL pliku graficznego, aby zmienić rozmiar obrazu. Nie zapomnij o przestrzeni przed =.

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

Możesz pominąć WYSOKOŚĆ

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

Możesz po prostu użyć HTMLa w swoim Markdown:

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

Lub poprzez styleatrybut ( nie obsługiwany przez GitHub )

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

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

![drawing](drawing.jpg)

CSS w innym pliku:

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

Przyjęta tutaj odpowiedź nie działa z żadnym edytorem Markdown dostępnym w aplikacjach, z których korzystałem do tej pory, takich jak Ghost, Stackedit.io, a nawet w edytorze przepełnienia stosu. Znalazłem obejście tutaj w narzędziu do śledzenia problemów StackEdit.io .

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

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

Mam nadzieję, że to pomoże.

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 HTML <img>tagu, lub [width=0.5\textwidth]do\includegraphics w LaTeX.

Ź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 dokumentów

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 github z Jekyll i Kramdown.

Można skorzystać z altatrybutu, który można ustawić w prawie wszystkich implementacjach / rendererach Markdown razem z selektorami CSS opartymi na wartościach atrybutów. Zaletą jest to, że można łatwo zdefiniować cały zestaw różnych rozmiarów obrazu (i dalsze atrybuty).

Obniżka cen:

![minipic](mypic.jpg)

CSS:

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

wymienić ![title](image-url.type)z<img src="https://image-url.type" width="200" height="200">

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

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

Następnie dodaj to do swojego niestandardowego CSS :

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

Opierając się na odpowiedzi Tiemes, jeśli używasz CSS 3 , możesz użyć selektora podciągów :

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

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

Następnie możesz nadal używać tagu alt zgodnie z jego przeznaczeniem do opisywania obrazu.

Markdown dla powyższego może wyglądać następująco:

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

Używałem tego w Markdown i działa dobrze.

Łącząc dwie odpowiedzi, znalazłem rozwiązanie, które może nie wygląda tak ładnie,
ale działa!

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

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

Oto przykład! Przetestowałem to na Visual Code i Github.

Przybyłem tutaj, szukając odpowiedzi. Kilka niesamowitych sugestii tutaj. A złote informacje wskazujące, że przecena całkowicie obsługuje HTMl!

Na pewno dobrym, czystym rozwiązaniem jest zawsze stosowanie czystej składni HTML. Z tagiem.

Ale starałem się nadal trzymać składni Markdown, więc próbowałem owijać ją wokół tagu i dodawać dowolne atrybuty, które chciałem dla obrazu wewnątrz tagu div. I DZIAŁA !!

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

W ten sposób obsługiwane są obrazy zewnętrzne!

Pomyślałem, że opublikuję to, ponieważ nie ma na to żadnej odpowiedzi. :)

Dla tych, którzy są nastawieni na rozwiązanie rmarkdowni knitr. Istnieje kilka sposobów zmiany rozmiaru obrazów w .rmdpliku 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')
```

Skryptowałem prosty parser znacznikó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 _pluginsfolderu.

Wiem, że ta odpowiedź jest nieco 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.

Gdy prześlesz zdjęcie w komentarzu do GitHub, zostanie ono dodane przez Imgur, więc to bardzo pomoże, jeśli zdjęcie jest bardzo duże.

Zasadniczo zamiast http://i.imgur.com/12345.jpg , dla średnich rozmiarów należy umieścić http://i.imgur.com/12345m.jpg .

Możesz również użyć tego 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 dodawać dowolne atrybuty do ostatniego elementu HTML. Aby dodać klasy, istnieje skrót .class.secondclass .

Ten działa dla mnie, nie ma go w jednej linii, ale mam nadzieję, że zadziała dla ciebie.

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

W przypadku R-Markdown żadne z powyższych rozwiązań nie działało dla mnie, dlatego 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. \begin{center}Instrukcji do wyśrodkowania obrazu.

Jest sposób na dodanie stylu klasy i css

![pic][logo]{.classname}

następnie zapisz poniżej link i css

[logo]: (picurl)

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

Odwołaj się tutaj

Dla wszystkich, którzy szukają rozwiązań, które działają w Markdown / bookdown R , te z poprzednich rozwiązań nie działają / nie wymagają lub wymagają niewielkiej adaptacji:

Pracujący

• Dołącz { width=50% }lub{ width=50% height=50% }

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

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

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

• Dodać { height="36px" width="36px" }

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

Nie działa:

• Dodać =WIDTHxHEIGHT
  • po adresie URL pliku graficznego, aby zmienić rozmiar obrazu (od @prosseek)
  • ani =WIDTHxHEIGHT ![foo](foo.png =100x20)też nie =WIDTHtylko ![foo](foo.png =250x)praca

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 Corilli, ponieważ uważam, że wzorzec jest zgodny z oczekiwaniami dotyczącymi istniejących przepływów pracy bez zmuszania użytkownika do polegania na podstawowym języku HTML. Jeśli twoje ulubione narzędzie nie ma podobnego wzoru, warto zgłosić prośbę o dodanie funkcji.

Przykład składni:

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

Przykład kociaka:

Zmiana rozmiaru załączników obrazu Markdown w notatniku Jupyter

Używam jupyter_core-4.4.0& jupyter notebook.

Jeśli dołączasz swoje zdjęcia, wstawiając je do znacznika 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 attachmentlinki nie działają:

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

ZRÓB TO . To robi pracę.

Wystarczy dodać nawiasy klamrowe.

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

Mam nadzieję że to pomoże!

Dla przyszłego odniesienia:

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

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

Funkcja ta została wezwana tutaj i jak obiecał przez Laurent ten został wdrożony.

Zajęło mi trochę czasu, aby wymyślić konkretną odpowiedź Joplin.

Jeśli używasz obrazów w stylu Github :

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


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

Korzystając z Flask (używam go z płaskimi stronami) ... odkryłem, że włączenie jawnie (z jakiegoś powodu domyślnie nie było) 'attr_list' w rozszerzeniach w wywołaniu markdown robi lewę - i wtedy można użyć atrybutów (bardzo przydatne również w celu uzyskania dostępu do CSS - class = "my class" na przykład ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

i 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 potem w Markdown:

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

W przypadku użytkowników IntelliJ IDEA zapoznaj się z Markdown Navigator wtyczką .

Podgląd renderuje obrazy, znaczki, HTML itp.

Jeśli zmiana początkowego znacznika nie jest dla Ciebie opcją, ten hack może dział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ż program Outlook ignoruje wszelkie style css obrazu)

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

W moim przypadku używam pandoc do konwersji przeceny na lateks. Tagi HTML nie będą tu działać.

Moje rozwiązanie polega na ponownym wdrożeniu \includegraphics

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

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