Tôi vừa mới bắt đầu với Markdown. Tôi thích nó, nhưng có một điều làm tôi khó chịu: Làm cách nào tôi có thể thay đổi kích thước của hình ảnh bằng Markdown?

Tài liệu chỉ đưa ra gợi ý sau cho hình ảnh:

![drawing](drawing.jpg)

Nếu có thể tôi muốn hình ảnh cũng được làm trung tâm. Tôi đang yêu cầu Markdown chung, không chỉ là cách GitHub làm điều đó.

Với một số triển khai Markdown nhất định (bao gồm Mou và Marked 2 (chỉ macOS)), bạn có thể nối thêm =WIDTHxHEIGHTsau URL của tệp đồ họa để thay đổi kích thước hình ảnh. Đừng quên không gian trước =.

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

Bạn có thể bỏ qua HEIGHT

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

Bạn chỉ có thể sử dụng một số HTML trong Markdown của mình:

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

Hoặc thông qua stylethuộc tính ( không được GitHub hỗ trợ )

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

Hoặc bạn có thể sử dụng tệp CSS tùy chỉnh như được mô tả trong câu trả lời này trên Markdown và căn chỉnh hình ảnh

![drawing](drawing.jpg)

CSS trong một tệp khác:

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

Câu trả lời được chấp nhận ở đây không hoạt động với bất kỳ trình soạn thảo Markdown nào có sẵn trong các ứng dụng tôi đã sử dụng cho đến ngày như Ghost, Stackedit.io hoặc thậm chí trong trình chỉnh sửa Stack Overflow. Tôi đã tìm thấy một cách giải quyết ở đây trong trình theo dõi vấn đề StackEdit.io .

Giải pháp là sử dụng trực tiếp cú pháp HTML và nó hoạt động hoàn hảo:

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

Tôi hi vọng cái này giúp được.

Chỉ dùng:

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

thay vì:

![](Assets/icon.png)

Nếu bạn đang viết MarkDown cho PanDoc, bạn có thể làm điều này:

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

Điều này thêm style="width: 50%;"vào HTML <img>tag, hoặc [width=0.5\textwidth]để \includegraphicstrong LaTeX.

Nguồn: http://pandoc.org/MANUAL.html#extension-link_attribut

Có thể điều này gần đây đã thay đổi nhưng các tài liệu Kramdown cho thấy một giải pháp đơn giản.

Từ các tài liệu

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

And here is a referenced ![smile]

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

Hoạt động trên github với Jekyll và Kramdown.

Người ta có thể dựa vào altthuộc tính có thể được đặt trong hầu hết tất cả các triển khai / kết xuất Markdown cùng với các bộ chọn CSS dựa trên các giá trị thuộc tính. Ưu điểm là người ta có thể dễ dàng xác định một tập hợp các kích thước hình ảnh khác nhau (và các thuộc tính khác).

Đánh dấu

![minipic](mypic.jpg)

CSS:

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

Thay thế ![title](image-url.type)bằng<img src="https://image-url.type" width="200" height="200">

Nếu bạn đang sử dụng kramdown , bạn có thể làm điều này:

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

Sau đó thêm phần này vào CSS tùy chỉnh của bạn :

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

Dựa trên câu trả lời của Tieme, nếu bạn đang sử dụng CSS 3, bạn có thể sử dụng bộ chọn chuỗi con :

Công cụ chọn này sẽ khớp bất kỳ hình ảnh nào với thẻ alt kết thúc bằng '-full thong':

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

Sau đó, bạn vẫn có thể sử dụng thẻ alt cho mục đích dự định của nó để mô tả hình ảnh.

Markdown cho ở trên có thể là một cái gì đó như:

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

Tôi đã sử dụng tính năng này trong Ghost markdown và nó đã hoạt động tốt.

Kết hợp hai câu trả lời tôi đưa ra với một giải pháp, có thể trông không đẹp lắm,
nhưng nó hoạt động!

Nó tạo ra một hình thu nhỏ với kích thước cụ thể có thể được nhấp để đưa bạn đến hình ảnh độ phân giải tối đa.

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

Đây là một ví dụ! Tôi đã thử nghiệm nó trên Visual Code và Github.

Tôi đến đây để tìm kiếm một câu trả lời. Một số gợi ý tuyệt vời ở đây. Và thông tin vàng chỉ ra rằng markdown hỗ trợ hoàn toàn HTMl!

Một giải pháp sạch tốt là luôn luôn đi với cú pháp html thuần túy. Với thẻ.

Nhưng tôi đã cố gắng vẫn theo cú pháp đánh dấu nên tôi đã thử bọc nó xung quanh một thẻ và thêm bất kỳ thuộc tính nào tôi muốn cho hình ảnh bên trong thẻ div. Và nó hoạt động!!

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

Vì vậy, cách này hình ảnh bên ngoài được hỗ trợ!

Chỉ cần nghĩ rằng tôi sẽ đưa nó ra khỏi đó vì nó không có trong bất kỳ câu trả lời. :)

Đối với những người xen kẽ trong một rmarkdownvà knitrgiải pháp. Có một số cách để thay đổi kích thước hình ảnh trong một .rmdtệp mà không cần sử dụng html:

Bạn chỉ có thể chỉ định chiều rộng cho hình ảnh bằng cách thêm {width=123px}. Đừng giới thiệu khoảng trắng ở giữa các dấu ngoặc:

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

Một lựa chọn khác là sử dụng knitr::include_graphics:

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

Tôi đã viết kịch bản trình phân tích thẻ đơn giản để sử dụng thẻ img có kích thước tùy chỉnh trong Jekyll .

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

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

Bạn có thể thêm tập tin vào _pluginsthư mục.

Tôi biết rằng câu trả lời này là một chút cụ thể, nhưng nó có thể giúp những người khác cần.

Vì nhiều ảnh được tải lên bằng dịch vụ Imgur , bạn có thể sử dụng API chi tiết tại đây để thay đổi kích thước của ảnh.

Khi tải lên một bức ảnh trong một bình luận về vấn đề GitHub, nó sẽ được thêm vào thông qua Imgur, vì vậy điều này sẽ giúp ích rất nhiều nếu bức ảnh rất lớn.

Về cơ bản, thay vì http://i.imgur.com/12345.jpg , bạn sẽ đặt http://i.imgur.com/12345m.jpg cho hình ảnh có kích thước trung bình.

Bạn cũng có thể sử dụng cái này với kramdown:

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

hoặc là

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

Bằng cách này, bạn có thể trực tiếp thêm các thuộc tính tùy ý vào phần tử html cuối cùng. Để thêm các lớp, có một phím tắt . Class.second class .

Cái này hoạt động với tôi nó không phải trong một dòng nhưng tôi hy vọng nó hoạt động cho bạn.

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

Đối với R-Markdown, cả hai giải pháp trên đều không phù hợp với tôi, vì vậy tôi đã chuyển sang cú pháp LaTeX thông thường , hoạt động rất tốt.

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

Sau đó, bạn có thể sử dụng ví dụ: \begin{center}câu lệnh để căn giữa hình ảnh.

Có cách với phong cách thêm lớp và css

![pic][logo]{.classname}

sau đó viết liên kết và css bên dưới

[logo]: (picurl)

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

Tham khảo tại đây

Đối với tất cả các tìm kiếm giải pháp hoạt động trong R markdown / bookdown , những giải pháp trước đây không / không hoạt động hoặc cần điều chỉnh nhẹ:

Đang làm việc

• Nối { width=50% }hoặc{ width=50% height=50% }

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

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

  • Quan trọng: không có dấu phẩy giữa chiều rộng và chiều cao - tức là { width=50%, height=30% } sẽ không hoạt động !

• Nối { height="36px" width="36px" }

  • ![foo](foo.png){ height="36px" width="36px" }
  • Lưu ý: {:height="36px" width="36px"} với dấu hai chấm, như từ @sayth, dường như không hoạt động với R markdown

Không làm việc:

• Nối =WIDTHxHEIGHT
  • sau URL của tệp đồ họa để thay đổi kích thước hình ảnh (như từ @prosseek)
  • không chỉ =WIDTHxHEIGHT ![foo](foo.png =100x20)không làm việc=WIDTH![foo](foo.png =250x)

Nếu bạn đang sử dụng hình ảnh kiểu tham chiếu Github :

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


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

Việc thêm các kích thước tương đối vào URL nguồn sẽ được hiển thị trong phần lớn các trình kết xuất Markdown.

Chúng tôi đã triển khai điều này ở Corilla vì tôi nghĩ rằng mô hình này tuân theo các kỳ vọng về quy trình công việc hiện có mà không khiến người dùng phải dựa vào HTML cơ bản. Nếu công cụ yêu thích của bạn không theo một mẫu tương tự, thì đáng để đưa ra yêu cầu tính năng.

Ví dụ về cú pháp:

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

Ví dụ về mèo con:

Thay đổi kích thước tệp đính kèm hình ảnh trong máy tính xách tay Jupyter

Tôi đang sử dụng jupyter_core-4.4.0& jupyter notebook.

Nếu bạn đang đính kèm hình ảnh của mình bằng cách chèn chúng vào phần đánh dấu như thế này:

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

Các attachmentliên kết này không hoạt động:

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

LÀM NÀY . Điều này không hoạt động.

Chỉ cần thêm dấu ngoặc div.

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

Hi vọng điêu nay co ich!

Để tham khảo trong tương lai:

Triển khai đánh dấu cho Joplin cho phép kiểm soát kích thước của hình ảnh được nhập theo cách sau:

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

Tính năng này đã được yêu cầu ở đây và như đã hứa bởi Laurent này đã được thực hiện.

Tôi phải mất một thời gian để tìm ra câu trả lời cụ thể của Joplin.

Khi sử dụng Flask (Tôi đang sử dụng nó với các trang phẳng) ... Tôi thấy rằng việc bật rõ ràng (không phải theo mặc định vì một số lý do) 'attr_list' trong các tiện ích mở rộng trong lệnh gọi để đánh dấu - và sau đó người ta có thể sử dụng các thuộc tính (cũng rất hữu ích để truy cập CSS - class = "lớp của tôi" chẳng hạn ...).

FLATPAGESET_RENDERER = prerender_jinja

và chức năng:

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

Và sau đó trong Markdown:

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

Đối với người dùng IntelliJ IDEA , vui lòng tham khảo plugin Markdown Navigator .

Xem trước kết xuất hình ảnh, huy hiệu, HTML, vv

Nếu thay đổi đánh dấu ban đầu không phải là một tùy chọn cho bạn, thì hack này có thể hoạt động:

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

Tôi đã sử dụng điều này để có thể thay đổi kích thước hình ảnh trước khi gửi chúng trong email (vì Outlook bỏ qua mọi kiểu dáng css hình ảnh)

Câu trả lời của Tieme là tốt nhất cho hầu hết các trường hợp.

Trong trường hợp của tôi, tôi đang sử dụng pandoc để chuyển đổi markdown thành latex. Thẻ HTML sẽ không hoạt động ở đây.

Giải pháp của tôi là thực hiện lại \includegraphics

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

Điều này tương tự với việc sử dụng CSS sau khi chuyển đổi sang HTML.