Markdown ile yeni başladım. Seviyorum, ama beni rahatsız eden bir şey var: Markdown kullanarak bir görüntünün boyutunu nasıl değiştirebilirim?

Belgeler bir görüntü için sadece aşağıdaki önerileri vermektedir:

![drawing](drawing.jpg)

Mümkünse resmin de ortalanmasını istiyorum. Sadece GitHub'ın nasıl yaptığını değil, genel Markdown'u istiyorum.

Belirli Markdown uygulamalarında ( Mou ve Marked 2 dahil (yalnızca macOS)) =WIDTHxHEIGHTgörüntüyü yeniden boyutlandırmak için grafik dosyasının URL'sinden sonra ekleyebilirsiniz . Önce boşluğu unutma =.

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

YÜKSEKLİĞİ atlayabilirsiniz

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

Markdown'unuzda biraz HTML kullanabilirsiniz:

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

Veya styleöznitelik yoluyla ( GitHub tarafından desteklenmez )

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

Veya Markdown ve resim hizalama ile ilgili bu yanıtta açıklandığı gibi özel bir CSS dosyası kullanabilirsiniz

![drawing](drawing.jpg)

Başka bir dosyadaki CSS:

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

Burada kabul edilen cevap, Ghost, Stackedit.io veya hatta Stack Overflow editörü gibi bugüne kadar kullandığım uygulamalarda bulunan herhangi bir Markdown editörü ile çalışmıyor. Burada StackEdit.io sorun izci bir geçici çözüm buldum .

Çözüm, HTML sözdizimini doğrudan kullanmaktır ve mükemmel çalışır:

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

Umarım bu yardımcı olur.

Sadece kullan:

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

onun yerine:

![](Assets/icon.png)

PanDoc için MarkDown yazıyorsanız, bunu yapabilirsiniz:

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

Bu ekler style="width: 50%;"HTML <img>etiketine veya [width=0.5\textwidth]hiç \includegraphicsLaTeX'te.

Kaynak: http://pandoc.org/MANUAL.html#extension-link_attributes

Belki bu son zamanlarda değişti, ancak Kramdown belgeleri basit bir çözüm gösteriyor.

Dokümanlardan

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

And here is a referenced ![smile]

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

Jekyll ve Kramdown ile github üzerinde çalışır.

Bir esas alabilecek altözniteliği neredeyse tüm Markdown uygulamalarda ayarlanabilir / rendererlarin CSS-seçicileri ile birlikte nitelik değerlerine dayalı. Avantajı, bir dizi farklı resim boyutu (ve diğer özellikler) kolayca tanımlayabilmesidir.

Markdown:

![minipic](mypic.jpg)

CSS:

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

Değiştir ![title](image-url.type)ile<img src="https://image-url.type" width="200" height="200">

Eğer kramdown kullanıyorsanız bunu yapabilirsiniz:

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

Ardından bunu Özel CSS'nize ekleyin :

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

Tiemes yanıtından yola çıkarak, CSS 3 kullanıyorsanız bir alt dize seçici kullanabilirsiniz :

Bu seçici, '-fullwidth' ile biten bir alt etiketine sahip tüm resimlerle eşleşir:

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

Daha sonra görüntüyü tanımlamak için alt etiketi yine de amaçlanan amaç için kullanabilirsiniz.

Yukarıdakiler için Markdown şöyle olabilir:

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

Bunu Ghost markdown'da kullanıyorum ve iyi çalışıyor.

İki cevabı birleştirerek bir çözüm buldum, bu hoş görünmeyebilir,
ama işe yarıyor!

Maksimum çözünürlük görüntüsüne getirmek için tıklanabilecek belirli bir boyuta sahip bir küçük resim oluşturur.

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

İşte bir örnek! Visual Code ve Github üzerinde test ettim.

Buraya bir cevap aramaya geldim. Burada bazı harika öneriler. Ve işaretlemenin altın bilgi HTMl'yi tamamen desteklediğine işaret ediyor!

İyi bir temiz çözüm, her zaman saf html sözdizimiyle mutlaka gitmektir. Etiketi ile.

Ama yine de bir etiketin etrafına sarmaya çalıştım ve div etiketi içindeki görüntü için istediğim nitelikleri ekledim. Ve çalışıyor!!

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

Böylece harici görüntüler desteklenir!

Sadece cevapların hiçbirinde olmadığı için bunu koyacağımı düşündüm. :)

Bir rmarkdownve knitrçözelti ile iç içe olanlar için . .rmdDosya kullanmadan görüntüleri kullanmadan yeniden boyutlandırmanın bazı yolları vardır html:

Ekleyerek bir görüntü için genişlik belirtebilirsiniz {width=123px}. Köşeli ayraçlar arasında boşluk bırakmayın:

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

Başka bir seçenek kullanmaktır knitr::include_graphics:

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

Ben bir özel boyutlu img etiketini kullanarak basit etiket ayrıştırıcı senaryosunu Jekyll .

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

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

Dosyayı _pluginsklasöre ekleyebilirsiniz .

Bu cevabın biraz spesifik olduğunu biliyorum, ancak ihtiyacı olan diğerlerine yardımcı olabilir.

İmgur hizmeti kullanılarak çok sayıda fotoğraf yüklendiği için , fotoğrafın boyutunu değiştirmek için burada ayrıntılı olarak verilen API'yi kullanabilirsiniz .

GitHub sayı yorumuna fotoğraf yüklerken, Imgur aracılığıyla eklenecek, bu yüzden fotoğraf çok büyükse bu çok yardımcı olacaktır.

Temel olarak, http://i.imgur.com/12345.jpg yerine, orta boyutlu görüntü için http://i.imgur.com/12345m.jpg koyabilirsiniz .

Bunu kramdown ile de kullanabilirsiniz:

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

veya

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

Bu şekilde, son html öğesine doğrudan keyfi özellikler ekleyebilirsiniz. Sınıf eklemek için bir .class.secondclass kısayolu vardır .

Bu benim için çalışıyor bir satırda değil ama umarım sizin için çalışır.

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

R-Markdown için, yukarıdaki çözümlerin hiçbiri benim için çalışmadı, bu yüzden normal LaTeX sözdizimine döndüm , ki bu gayet iyi çalışıyor.

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

Ardından görüntüyü ortalamak için örneğin \begin{center}ifadeyi kullanabilirsiniz.

Sınıf ekleme ve css stili ile yolu var

![pic][logo]{.classname}

sonra aşağıya link ve css yazın

[logo]: (picurl)

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

Burada Referans

R işaretleme / ayırma işleminde çalışan tüm çözümleri arayanlar için , önceki çözümlerin bunlar işe yaramıyor / çalışmıyor ya da küçük bir uyarlamaya ihtiyaç duyuyor:

Çalışma

• Ekle { width=50% }veya{ width=50% height=50% }

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

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

  • Önemli: genişlik ve yükseklik arasında virgül yoktur - yani { width=50%, height=30% } çalışmaz !

• ekleme { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Not: {:height="36px" width="36px"} @sayth'dan olduğu gibi iki nokta üst üste işareti ile R işareti ile çalışmıyor gibi görünüyor

Çalışmıyor:

• ekleme =WIDTHxHEIGHT
  • resmi yeniden boyutlandırmak için grafik dosyasının URL'sinden sonra (@prosseek'ten)
  • ne ne =WIDTHxHEIGHT ![foo](foo.png =100x20)de =WIDTHsadece ![foo](foo.png =250x)çalışır

Github referans stili görüntüler kullanıyorsanız:

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


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

Kaynak URL'ye göreli boyutların eklenmesi, Markdown oluşturucularının çoğunda gerçekleştirilecektir.

Bunu Corilla'da uyguladıkDeseni, kullanıcıyı temel HTML'ye güvenmeye zorlamadan mevcut iş akışlarının beklentilerini takip eden bir model olduğunu düşündüğümüz için . Favori aracınız benzer bir kalıbı takip etmiyorsa, bir özellik isteği yükseltmeye değer.

Sözdizimi örneği:

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

Yavru kedi örneği:

Jupyter Not Defteri'ndeki Markdown Görüntü Eklerini Yeniden Boyutlandırma

jupyter_core-4.4.0& Jupyter defter kullanıyorum .

Resimlerinizi aşağıdaki gibi işaretlemeye ekleyerek ekliyorsanız:

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

Bu attachmentlinkler yoktur çalışır:

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

BUNU YAP . Bu yapar işi.

Sadece div parantezleri ekleyin.

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

Bu yardımcı olur umarım!

İleride başvurmak için:

Joplin için işaretleme uygulaması , içe aktarılan görüntülerin boyutunu aşağıdaki şekilde kontrol etmenizi sağlar:

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

Bu özellik burada ve Laurent tarafından vaat edildiği gibi talep edildi bu uygulandı.

Joplin'e özgü cevabı bulmak biraz zamanımı aldı.

Flask kullanırken (düz sayfalarla kullanıyorum) ... Markdown çağrısı içindeki uzantılarda açıkça (varsayılan olarak değildi) 'attr_list' in hile yaptığını gördüm - ve sonra öznitelikleri kullanabilir (örneğin CSS - class = "sınıfım" a erişmek için de çok yararlıdır).

FLATPAGES_HTML_RENDERER = prerender_jinja

ve fonksiyon:

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

Ve sonra Markdown'da:

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

İçin IntelliJ IDEA kullanıcıları, bakınız Markdown Navigator eklentisi.

Önizleme görüntüleri, rozetleri, HTML vb. Oluşturur.

İlk işaretlemeyi değiştirmek sizin için bir seçenek değilse, bu saldırı işe yarayabilir:

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

Bunu bir e-postayla göndermeden önce resimleri yeniden boyutlandırmak için kullandım (Outlook herhangi bir görüntü css stilini yoksayar)

Tieme'nin cevabı çoğu durumda en iyisidir.

Benim durumumda, markdown'u latekse dönüştürmek için pandoc kullanıyorum. HTML etiketleri burada çalışmaz.

Benim çözümüm yeniden uygulamak \includegraphics

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

HTML'ye dönüştürüldükten sonra CSS kullanmaya benzer.