ฉันเพิ่งเริ่มต้นกับ Markdown ฉันชอบมัน แต่มีสิ่งหนึ่งที่ทำให้ฉันรำคาญ: ฉันจะเปลี่ยนขนาดของภาพโดยใช้ Markdown ได้อย่างไร

เอกสารประกอบให้คำแนะนำต่อไปนี้สำหรับรูปภาพเท่านั้น:

![drawing](drawing.jpg)

หากเป็นไปได้ฉันต้องการให้ภาพอยู่กึ่งกลาง ฉันขอ Markdown ทั่วไปไม่ใช่แค่วิธีที่ GitHub ทำเท่านั้น

ด้วยการประยุกต์ใช้ Markdown บางอย่าง (รวมถึงMouและMarked 2 (เฉพาะ macOS)) คุณสามารถต่อท้าย=WIDTHxHEIGHTURL ของไฟล์กราฟิกเพื่อปรับขนาดภาพ =อย่าลืมช่องว่างก่อนที่

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

คุณสามารถข้ามความสูงได้

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

คุณสามารถใช้ 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; }

คำตอบที่ยอมรับได้ที่นี่จะไม่ทำงานกับตัวแก้ไข Markdown ที่มีอยู่ในแอพที่ฉันใช้มาจนถึงปัจจุบันเช่น Ghost, Stackedit.io หรือแม้แต่ในตัวแก้ไข Stack Overflow ผมพบว่าการแก้ปัญหาที่นี่ในติดตามปัญหา StackEdit.io

วิธีแก้ไขคือใช้ไวยากรณ์ HTML โดยตรงและทำงานได้อย่างสมบูรณ์:

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

ฉันหวังว่านี่จะช่วยได้.

เพียงใช้:

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

แทน:

![](Assets/icon.png)

หากคุณกำลังเขียน MarkDown สำหรับ PanDoc คุณสามารถทำได้:

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

นี้จะเพิ่มstyle="width: 50%;"การของ HTML <img>แท็กหรือ[width=0.5\textwidth]การ\includegraphicsในน้ำยาง

แหล่งที่มา: http://pandoc.org/MANUAL.html#extension-link_attributes

อาจจะมีการเปลี่ยนแปลงเมื่อเร็ว ๆ นี้ แต่เอกสาร 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 กับ Jekyll และ Kramdown

หนึ่งอาจวาดในaltคุณลักษณะที่สามารถตั้งค่าในการใช้งาน / แสดงผล Markdown เกือบทั้งหมดพร้อมกับ CSS-selectorsขึ้นอยู่กับค่าคุณลักษณะ ข้อดีคือสามารถกำหนดขนาดรูปภาพที่แตกต่างกันทั้งชุด (และคุณสมบัติเพิ่มเติม) ได้อย่างง่ายดาย

markdown:

![minipic](mypic.jpg)

CSS:

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

แทนที่![title](image-url.type)ด้วย<img src="https://image-url.type" width="200" height="200">

หากคุณกำลังใช้ kramdownคุณสามารถทำได้:

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

จากนั้นเพิ่มลงในCSS ที่กำหนดเองของคุณ :

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

คำตอบต่อจาก Tiemes หากคุณใช้CSS 3คุณสามารถใช้ตัวเลือกสตริงย่อย :

ตัวเลือกนี้จะจับคู่ภาพที่มีแท็ก alt ที่ลงท้ายด้วย '-fullwidth':

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

จากนั้นคุณยังสามารถใช้แท็ก alt เพื่อจุดประสงค์ได้ในการอธิบายภาพได้

Markdown ด้านบนอาจเป็นสิ่งที่ต้องการ:

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

ฉันใช้สิ่งนี้ในการทำเครื่องหมายผีและมันทำงานได้ดี

เมื่อรวมสองคำตอบฉันออกมาพร้อมกับวิธีแก้ปัญหาซึ่งอาจดูไม่สวย
แต่ก็ใช้ได้ดี!

มันสร้างภาพขนาดย่อที่มีขนาดเฉพาะที่อาจมีการคลิกเพื่อนำคุณไปสู่ภาพความละเอียดสูงสุด

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

นี่คือตัวอย่าง! ฉันทดสอบด้วย Visual Code และ Github

ฉันมาที่นี่เพื่อค้นหาคำตอบ คำแนะนำที่ยอดเยี่ยมที่นี่ และข้อมูลทองคำที่ระบุว่า markdown สนับสนุน HTMl อย่างสมบูรณ์!

ทางออกที่ดีที่สะอาดอยู่เสมอจะไปกับไวยากรณ์ html บริสุทธิ์แน่นอน ด้วยแท็ก

แต่ฉันก็ยังพยายามที่จะยึดติดกับไวยากรณ์ของ markdown ดังนั้นฉันจึงลองล้อมรอบแท็กและเพิ่มคุณสมบัติที่ฉันต้องการสำหรับภาพภายในแท็ก div และมันก็ทำงาน !!

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

ดังนั้นวิธีนี้รองรับภาพภายนอก!

แค่คิดว่าฉันจะเอามันออกไปเพราะไม่มีคำตอบใด ๆ :)

สำหรับผู้ที่ intereseted ใน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')
```

ฉันสคริปต์ parser แท็กที่ง่ายสำหรับการใช้แท็ก img ขนาดเองในJekyll

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

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

คุณสามารถเพิ่มไฟล์ลงใน_pluginsโฟลเดอร์

ฉันรู้ว่าคำตอบนี้ค่อนข้างเฉพาะเจาะจง แต่อาจช่วยคนอื่นที่ต้องการความช่วยเหลือ

เนื่องจากมีการอัพโหลดรูปภาพจำนวนมากโดยใช้บริการ Imgurคุณสามารถใช้รายละเอียด API ได้ที่นี่เพื่อเปลี่ยนขนาดของรูปภาพ

เมื่ออัปโหลดรูปภาพในความคิดเห็นของปัญหา GitHub รูปภาพนั้นจะถูกเพิ่มผ่าน Imgur ดังนั้นสิ่งนี้จะช่วยได้มากหากภาพถ่ายมีขนาดใหญ่มาก

โดยพื้นฐานแล้วแทนที่จะเป็นhttp://i.imgur.com/12345.jpgคุณควรใส่http://i.imgur.com/12345m.jpgสำหรับภาพขนาดกลาง

คุณสามารถใช้อันนี้กับ kramdown:

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

หรือ

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

วิธีนี้คุณสามารถเพิ่มแอททริบิวต์เองไปยังองค์ประกอบ html สุดท้ายได้โดยตรง ในการเพิ่มคลาสให้มีทางลัด. class.secondclass

อันนี้เหมาะกับฉันมันไม่ได้อยู่ในบรรทัดเดียว แต่ฉันหวังว่ามันจะใช้ได้ผลสำหรับคุณ

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

สำหรับ R-Markdown การแก้ปัญหาข้างต้นไม่เหมาะกับฉันดังนั้นฉันจึงหันไปใช้ไวยากรณ์LaTeXปกติซึ่งใช้งานได้ดี

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

จากนั้นคุณสามารถใช้\begin{center}คำสั่งเพื่อจัดกึ่งกลางของภาพ

มีวิธีการเพิ่ม class และ css style

![pic][logo]{.classname}

จากนั้นเขียนลิงก์และ css ด้านล่าง

[logo]: (picurl)

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

อ้างอิงที่นี่

สำหรับทุกคนกำลังมองหาโซลูชันที่ทำงานในR markdown / bookdownโซลูชั่นก่อนหน้านี้ไม่ทำงานหรือต้องการการปรับเปลี่ยนเล็กน้อย

การทำงาน

• ผนวก{ width=50% }หรือ{ width=50% height=50% }

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

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

  • สำคัญ:ไม่มีเครื่องหมายจุลภาคระหว่างความกว้างและความสูง - เช่น{ width=50%, height=30% } ไม่ทำงาน !

• ผนวก { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • หมายเหตุ: {:height="36px" width="36px"}กับโคลอนมาจาก @sayth ดูเหมือนว่าจะไม่ทำงานกับ R markdown

ไม่ทำงาน:

• ผนวก =WIDTHxHEIGHT
  • หลัง URL ของไฟล์กราฟิกเพื่อปรับขนาดภาพ (จาก @prosseek)
  • ค่า=WIDTHxHEIGHT ![foo](foo.png =100x20)มิได้=WIDTHเพียง แต่![foo](foo.png =250x)การทำงาน

หากคุณใช้ภาพสไตล์การอ้างอิง Github :

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


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

การเพิ่มขนาดสัมพัทธ์ให้กับ URL ต้นทางจะแสดงผลในตัวเรนเดอร์ Markdown ส่วนใหญ่

เราใช้สิ่งนี้ในCorillaเนื่องจากฉันคิดว่ารูปแบบนั้นเป็นไปตามความคาดหวังของเวิร์กโฟลว์ที่มีอยู่โดยไม่ต้องให้ผู้ใช้พึ่งพา HTML พื้นฐาน หากเครื่องมือที่คุณชื่นชอบไม่เป็นไปตามรูปแบบที่คล้ายกันถือว่าคุ้มค่าที่จะเพิ่มคำขอคุณลักษณะ

ตัวอย่างของไวยากรณ์:

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

ตัวอย่างของลูกแมว:

การปรับขนาดสิ่งที่แนบมากับภาพที่ลดลงในสมุดบันทึก Jupyter

ฉันใช้jupyter_core-4.4.0& โน๊ตบุ๊ค jupyter

หากคุณกำลังแนบภาพของคุณโดยการแทรกลงใน markdown เช่นนี้

![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>

หวังว่านี่จะช่วยได้!

สำหรับการอ้างอิงในอนาคต:

การติดตั้ง Markdown สำหรับJoplinช่วยให้สามารถควบคุมขนาดของภาพที่นำเข้าในลักษณะต่อไปนี้:

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

คุณลักษณะนี้ได้รับการร้องขอที่นี่และตามสัญญาโดยLaurentสิ่งนี้ได้ถูกนำไปใช้

ฉันใช้เวลาสักครู่เพื่อคิดคำตอบเฉพาะของ Joplin

เมื่อใช้Flask (ฉันใช้กับ flat page) ... ฉันพบว่าการเปิดใช้งานอย่างชัดเจน (ไม่ใช่ค่าเริ่มต้นด้วยเหตุผลบางประการ) '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

แล้วใน Markdown:

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

สำหรับผู้ใช้IntelliJ IDEAโปรดดูปลั๊กอินMarkdown Navigator

แสดงตัวอย่างรูปภาพรูปภาพป้าย HTML ฯลฯ

หากการเปลี่ยน markdown ครั้งแรกไม่ใช่ตัวเลือกสำหรับคุณแฮ็คนี้อาจใช้งานได้:

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

ฉันใช้นี่เพื่อให้สามารถปรับขนาดภาพก่อนที่จะส่งพวกเขาในอีเมล (เป็น Outlook ละเว้นรูปแบบ css ใด ๆ )

คำตอบของ Tieme นั้นดีที่สุดสำหรับกรณีส่วนใหญ่

ในกรณีของฉันฉันใช้ pandoc เพื่อแปลง markdown เป็น latex แท็ก HTML จะไม่ทำงานที่นี่

โซลูชันของฉันคือการนำกลับมาใช้ใหม่ \includegraphics

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

คล้ายกับการใช้ CSS หลังจากการแปลงเป็น HTML