Saya baru saja mulai dengan Markdown. Saya menyukainya, tetapi ada satu hal yang menggangguku: Bagaimana saya bisa mengubah ukuran gambar menggunakan Markdown?

Dokumentasi hanya memberikan saran berikut untuk gambar:

![drawing](drawing.jpg)

Jika mungkin saya ingin gambarnya juga dipusatkan. Saya meminta penurunan harga umum, bukan hanya bagaimana GitHub melakukannya.

Dengan implementasi penurunan harga tertentu (termasuk Mou dan Ditandai 2 (hanya MacOS)) Anda dapat menambahkan =WIDTHxHEIGHTsetelah URL dari file grafis untuk mengubah ukuran gambar. Jangan lupakan ruang sebelum =.

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

Anda dapat melewati HEIGHT

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

Anda bisa menggunakan beberapa HTML di Penurunan harga Anda:

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

Atau melalui styleatribut ( tidak didukung oleh GitHub )

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

Atau Anda dapat menggunakan file CSS khusus seperti yang dijelaskan dalam jawaban ini pada Penurunan harga dan penyelarasan gambar

![drawing](drawing.jpg)

CSS di file lain:

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

Jawaban yang diterima di sini tidak berfungsi dengan editor Markdown yang tersedia di aplikasi yang saya gunakan sampai saat ini seperti Ghost, Stackedit.io atau bahkan di editor Stack Overflow. Saya menemukan solusi di sini di pelacak masalah StackEdit.io .

Solusinya adalah dengan langsung menggunakan sintaks HTML, dan itu bekerja dengan sempurna:

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

Saya harap ini membantu.

Cukup gunakan:

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

dari pada:

![](Assets/icon.png)

Jika Anda menulis MarkDown untuk PanDoc, Anda dapat melakukan ini:

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

Ini menambah tag style="width: 50%;"HTML <img>, atau [width=0.5\textwidth]ke\includegraphics dalam LaTeX.

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

Mungkin ini baru saja berubah tetapi dokumen Kramdown menunjukkan solusi sederhana.

Dari dokumen

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

And here is a referenced ![smile]

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

Bekerja pada github dengan Jekyll dan Kramdown.

Orang mungkin menggambar pada altatribut yang dapat diatur di hampir semua implementasi / render Markdown bersama-sama dengan pemilih CSS berdasarkan nilai atribut. Keuntungannya adalah seseorang dapat dengan mudah mendefinisikan seluruh set ukuran gambar yang berbeda (dan atribut lebih lanjut).

Penurunan harga:

![minipic](mypic.jpg)

CSS:

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

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

Jika Anda menggunakan kramdown , Anda dapat melakukan ini:

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

Kemudian tambahkan ini ke Custom CSS Anda :

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

Membangun dari jawaban Tiemes, jika Anda menggunakan CSS 3 Anda dapat menggunakan pemilih substring :

Pemilih ini akan mencocokkan gambar apa pun dengan tag alt yang diakhiri dengan '-lebar':

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

Kemudian Anda masih dapat menggunakan tag alt untuk tujuan yang dimaksudkan untuk menggambarkan gambar.

Penurunan harga di atas bisa berupa:

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

Saya telah menggunakan ini dalam penurunan harga Ghost, dan itu telah bekerja dengan baik.

Menggabungkan dua jawaban, saya keluar dengan solusi, yang mungkin tidak terlihat cantik,
tetapi berhasil!

Itu menciptakan thumbnail dengan ukuran tertentu yang mungkin diklik untuk membawa Anda ke gambar resolusi maksimal.

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

Ini sebuah contoh! Saya mengujinya pada Visual Code dan Github.

Saya datang ke sini mencari jawaban. Beberapa saran luar biasa di sini. Dan informasi emas yang menunjukkan bahwa penurunan harga mendukung HTMl sepenuhnya!

Solusi bersih yang baik adalah selalu menggunakan sintaks html murni. Dengan tag.

Tapi saya mencoba untuk tetap menggunakan sintaks markdown jadi saya mencoba membungkusnya di sekitar tag dan menambahkan atribut apa pun yang saya inginkan untuk gambar di dalam tag div. Dan itu BEKERJA !!

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

Jadi dengan cara ini gambar eksternal didukung!

Hanya berpikir saya akan meletakkan ini di sana karena tidak ada di salah satu jawaban. :)

Bagi mereka yang terjalin dalam rmarkdowndan knitrsolusi. Ada beberapa cara untuk mengubah ukuran gambar dalam .rmdfile tanpa menggunakan html:

Anda cukup menentukan lebar untuk suatu gambar dengan menambahkan {width=123px}. Jangan memperkenalkan spasi putih di antara tanda kurung:

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

Pilihan lain adalah menggunakan knitr::include_graphics:

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

Saya menulis tag parser sederhana untuk menggunakan tag img ukuran khusus di Jekyll .

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

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

Anda dapat menambahkan file ke _pluginsfolder.

Saya tahu bahwa jawaban ini agak spesifik, tetapi mungkin membantu orang lain yang membutuhkan.

Karena banyak foto diunggah menggunakan layanan Imgur , Anda dapat menggunakan API yang dirinci di sini untuk mengubah ukuran foto.

Saat mengunggah foto dalam komentar masalah GitHub, itu akan ditambahkan melalui Imgur, jadi ini akan banyak membantu jika fotonya sangat besar.

Pada dasarnya, alih-alih http://i.imgur.com/12345.jpg , Anda akan meletakkan http://i.imgur.com/12345m.jpg untuk gambar berukuran sedang.

Anda bisa menggunakan yang ini juga dengan kramdown:

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

atau

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

Dengan cara ini Anda dapat langsung menambahkan atribut arbitrer ke elemen html terakhir. Untuk menambahkan kelas ada shortcut .class.secondclass .

Yang ini bekerja untuk saya itu tidak dalam satu baris tetapi saya harap ini bekerja untuk Anda.

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

Untuk R-Markdown, tak satu pun dari solusi di atas bekerja untuk saya, jadi saya beralih ke sintaks LaTeX biasa , yang berfungsi dengan baik.

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

Kemudian Anda dapat menggunakan misalnya \begin{center}pernyataan untuk memusatkan gambar.

Ada cara dengan menambahkan kelas dan gaya css

![pic][logo]{.classname}

kemudian tulis tautan dan css di bawah ini

[logo]: (picurl)

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

Referensi di sini

Untuk semua yang mencari solusi yang bekerja dalam penurunan harga / bookdown , solusi-solusi sebelumnya tidak / tidak bekerja atau perlu sedikit adaptasi:

Kerja

• Tambah { width=50% }atau{ width=50% height=50% }

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

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

  • Penting: tidak ada koma antara lebar dan tinggi - artinya { width=50%, height=30% } tidak akan berfungsi !

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

  • ![foo](foo.png){ height="36px" width="36px" }
  • Catatan: {:height="36px" width="36px"} dengan titik dua, seperti dari @sayth, tampaknya tidak berfungsi dengan penurunan harga R

Tidak bekerja:

• Menambahkan =WIDTHxHEIGHT
  • setelah URL file grafik untuk mengubah ukuran gambar (seperti dari @prosseek)
  • tidak =WIDTHxHEIGHT ![foo](foo.png =100x20)juga tidak =WIDTHhanya ![foo](foo.png =250x)bekerja

Jika Anda menggunakan gambar gaya referensi Github :

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


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

Penambahan dimensi relatif ke URL sumber akan diberikan di sebagian besar renderer Penurunan harga.

Kami menerapkan ini di Corilla karena saya pikir polanya adalah yang mengikuti ekspektasi alur kerja yang ada tanpa mendorong pengguna untuk mengandalkan HTML dasar. Jika alat favorit Anda tidak mengikuti pola serupa, ada baiknya mengajukan permintaan fitur.

Contoh sintaks:

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

Contoh anak kucing:

Mengubah ukuran Lampiran Gambar Penurunan Harga di Jupyter Notebook

Saya menggunakan jupyter_core-4.4.0& jupyter notebook.

Jika Anda melampirkan gambar Anda dengan memasukkannya ke dalam markdown seperti ini:

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

Ini attachmentlink tidak bekerja:

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

LAKUKAN INI . Ini tidak bekerja.

Cukup tambahkan kurung div.

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

Semoga ini membantu!

Untuk referensi di masa mendatang:

Implementasi penurunan harga untuk Joplin memungkinkan mengontrol ukuran gambar yang diimpor dengan cara berikut:

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

Fitur ini diminta di sini dan seperti yang dijanjikan oleh Laurent, ini telah diterapkan.

Butuh beberapa saat untuk menemukan jawaban spesifik Joplin.

Saat menggunakan Labu (saya menggunakannya dengan halaman datar) ... Saya menemukan bahwa mengaktifkan secara eksplisit (tidak secara default karena beberapa alasan) 'attr_list' dalam ekstensi dalam panggilan untuk penurunan harga melakukan trik - dan kemudian seseorang dapat menggunakan atribut (sangat berguna juga untuk mengakses CSS - class = "kelas saya" misalnya ...).

FLATPAGES_HTML_RENDERER = prerender_jinja

dan fungsinya:

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

Dan kemudian dalam penurunan harga:

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

Untuk pengguna IntelliJ IDEA , silakan merujuk ke plugin Markdown Navigator .

Pratinjau membuat gambar, lencana, HTML, dll.

Jika mengubah penurunan awal bukan merupakan pilihan bagi Anda, peretasan ini mungkin berfungsi:

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

Saya menggunakan ini untuk dapat mengubah ukuran gambar sebelum mengirimnya dalam email (karena Outlook mengabaikan gaya gambar css)

Jawaban Tieme paling baik untuk sebagian besar kasus.

Dalam kasus saya, saya menggunakan pandoc untuk mengubah penurunan harga menjadi lateks. Tag HTML tidak akan berfungsi di sini.

Solusi saya adalah menerapkan kembali \includegraphics

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

Ini analog dengan menggunakan CSS setelah konversi ke HTML.