# Markdown for image resize by px, not percent

**URL:** https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513
**Category:** Feature
**Created:** [2월 6, 2019, 5:00오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513 "2019-02-06T17:00:01Z")
**Posts on this page:** 16
**Page:** 1

<div class="post-metadata">

### Author: ![TallTed](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tallted/32/125029_2.png) [@TallTed](https://meta.discourse.org/u/TallTed)
#### Post date: [2월 6, 2019, 5:00오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/1 "2019-02-06T17:00:01Z")

</div>

[Quick image resizing and markdown image dimensions](https://meta.discourse.org/t/quick-image-resizing-and-markdown-image-dimensions/66812) talked about the new “Ninja ⚔ feature” to add `,25%` for image scaling.

That’s great, if you know the percentage that results in the `px` you want, and if you have consistently sized or few embedded images.

It’s not so great if you have a number of images of somewhat varying original size and you want them all to scale to (for instance) 250px width.

Changing a number of such images from markdown to HTML markup is also painful.

Any chance this Ninja feature could be enhanced to accept `%` _or_ `px` specifications for the scaling?

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2월 6, 2019, 5:36오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/2 "2019-02-06T17:36:03Z")

</div>

That is already supported:

`![very good|25x19](upload://uycrTGYy9jrMEYoTlOwdpcki5C.jpg)`

produces

 ![very good](https://global.discourse-cdn.com/meta/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

while

`![very good|250x190](upload://uycrTGYy9jrMEYoTlOwdpcki5C.jpg)`

produces

 ![very good](https://global.discourse-cdn.com/meta/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [2월 6, 2019, 5:41오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/3 "2019-02-06T17:41:44Z")

</div>

You can’t just specify the width though.

---

<div class="post-metadata">

### Author: ![TallTed](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tallted/32/125029_2.png) [@TallTed](https://meta.discourse.org/u/TallTed)
#### Post date: [2월 6, 2019, 6:04오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/4 "2019-02-06T18:04:37Z")

</div>

I had misunderstood the meaning of the `|250x190]`. I thought that was meant to convey the size of the original, not that it was meant as a scaling.

(Is there one place to look to find documentation of all Markdown-for-Discourse?)

But yes, my wish here is to specify the width to scale to, and have the height be scaled proportionally.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 6, 2019, 11:27오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/5 "2019-02-06T23:27:16Z")

</div>

I am pretty warm to adding support for:

`|250x]` and `|x190]` in fact I like this little bit of ninja so much that I will get the change slotted. @pmusaraj can you add this support?

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2월 8, 2019, 1:40오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/7 "2019-02-08T13:40:40Z")

</div>

This is now done and in `tests-passed`.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2월 20, 2019, 7:00오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/8 "2019-02-20T19:00:19Z")

</div>



---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 21, 2019, 4:40오전 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/9 "2019-02-21T04:40:51Z")

</div>

🤔 I am having a bit of trouble with this…

`![image|100x](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)`

 ![image|100x](https://global.discourse-cdn.com/meta/original/3X/6/0/600bc9dc87b11d067af1c03935745fd992e24166.jpeg)

`![image|x100](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)`

 ![image|x100](https://global.discourse-cdn.com/meta/original/3X/6/0/600bc9dc87b11d067af1c03935745fd992e24166.jpeg)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 21, 2019, 4:41오전 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/10 "2019-02-21T04:41:12Z")

</div>



---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2월 21, 2019, 5:30오전 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/12 "2019-02-21T05:30:04Z")

</div>

Not performant! 🤣

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2월 21, 2019, 1:42오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/13 "2019-02-21T13:42:27Z")

</div>

Hmm, this is set up to respond to this syntax `![image|354x356,100x](upload://dHF5P9JKjZN0gahVLRQmDIEqo8C.jpeg)` works:

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/0/600bc9dc87b11d067af1c03935745fd992e24166.jpeg)

I kept this consistent with percentage scaling, which responds to `[image|300x100,50%]`.

---

<div class="post-metadata">

### Author: ![TallTed](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tallted/32/125029_2.png) [@TallTed](https://meta.discourse.org/u/TallTed)
#### Post date: [2월 21, 2019, 4:26오후 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/14 "2019-02-21T16:26:23Z")

</div>

The percentage scaling ninja markup no longer makes mental sense to me.

`[image|300x100,50%]` says “show this image (actual size unknown), at 300px by 100px, but wait, scale that by 50%, so show it at 150px by 50px”.

I really don’t understand the point of this kind of notation – because you can just set the pixel sizing however you want it, so why not do the 50% scaling in the first place?

I do not want to specify one display size followed by a second display size, and cannot imagine why anyone would. I just want to say “show this image (of unknown original size) at 150px width, with proportionally scaled height” or “show this image (of unknown original size) at 150px height, with proportionally scaled width”.

---

<div class="post-metadata">

### Author: ![snsnjsn](https://avatars.discourse-cdn.com/v4/letter/s/47e85d/32.png) [@snsnjsn](https://meta.discourse.org/u/snsnjsn)
#### Post date: [10월 26, 2019, 6:34오전 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/15 "2019-10-26T06:34:55Z")

</div>

저도 같은 질문을 하고 싶은데, 그냥 그림만 알려주세요. 너비는 200px이고, 높이는 생략합니다.

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [2월 6, 2020, 1:09오전 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/16 "2020-02-06T01:09:19Z")

</div>

저도 이 기능이 있으면 좋겠습니다.

다시 한번 정리하면, 현재 이미지 크기를 조정하는 문법은 다음과 같습니다 (가독성을 위해 공백을 넣었습니다).

`! [IMAGE_NAME | WIDTHxHEIGHT, SCALE_PERCENTAGE] ( IMAGE_LOCATION )`

너무나도 좋은 기능은 너비나 높이 중 하나만 조정하고, 나머지 차원에 AUTO라는 단어를 입력할 수 있다면 어떨까 싶습니다.

예를 들어, 이 이미지의 너비를 150px로 설정하되, 높이를 적절한 해상도로 조정하기 위해 비율을 계산하고 싶지 않다면…  
`![very good|250x190](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)`

아래처럼 WIDTH를 `150`으로, HEIGHT를 `auto`로 대체할 수 있다면 정말 좋겠습니다…  
`![very good|150xauto](//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)`

@Falco 님, 의견이 있으신가요?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2월 6, 2020, 1:19오전 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/17 "2020-02-06T01:19:52Z")

</div>

여전히 원래 제안이 설명하기가 좀 더 쉽다고 생각합니다.

붙여넣기:

```plaintext
![image|494x500](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg) 

```

그리고 다음과 같이 편집:

```plaintext
![image|100x](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg) 

```

이렇게 하면 지금은 작동하지만, 설명하기가 좀 더 어렵습니다:

```plaintext
![image|494x500,100x](upload://jRgaIl6YH5la4m5rkLnkJIa6XYV.jpeg) 

```

@jord8on 이미 이 모든 것이 작동하며, 당신이 원하는 구문은 다음과 같습니다:

`[very good|250x190,150x]`

---

<div class="post-metadata">

### Author: ![jord8on](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jord8on/32/166809_2.png) [@jord8on](https://meta.discourse.org/u/jord8on)
#### Post date: [2월 6, 2020, 2:31오전 UTC](https://meta.discourse.org/t/markdown-for-image-resize-by-px-not-percent/108513/18 "2020-02-06T02:31:24Z")

</div>

아아, @sam, 방향을 잡아주셔서 감사합니다. 제가 지금 제대로 이해하고 있다면, 현재 기능은 완벽하네요.

제가 이해한 내용을 제대로 파악했는지 확인해 보겠습니다…

- "x"는 "auto"를 나타냅니다.
- 숫자 앞에 "x"를 사용하면 너비(width)를 나타냅니다. 예: `x150` = `"width: auto; height: 150px;"`
- 숫자 뒤에 "x"를 사용하면 높이(height)를 나타냅니다. 예: `150x` = `"width: 150px; height: auto;"`

––––––––––––––––––––––––––––––––––––

`"width:600px; height: 200px;"`인 이 이미지로 테스트해 보겠습니다.

기본 임베드 문법은 다음과 같습니다:

> `![we love discourse|600x200](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)`
> 
> 이것은 다음과 같이 보입니다…
> 
> ![we love discourse](https://global.discourse-cdn.com/meta/original/3X/7/3/73b57f63f2f5fa78db38981c2eafb1026693a0c6.png)

다음 이미지는 너비 200px로 축소되었습니다 (높이 = x = auto):

> `![we love discourse|600x200,200x](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)`
> 
> 이것은 다음과 같이 보입니다:
> 
> ![we love discourse](https://global.discourse-cdn.com/meta/original/3X/7/3/73b57f63f2f5fa78db38981c2eafb1026693a0c6.png)

다음 이미지는 높이 100px로 축소되었습니다 (너비 = x = auto):

> `![we love discourse|600x200,x100](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)`
> 
> 이것은 다음과 같이 보입니다:
> 
> ![we love discourse](https://global.discourse-cdn.com/meta/original/3X/7/3/73b57f63f2f5fa78db38981c2eafb1026693a0c6.png)

––––––––––––––––––––––––––––––––––––

매끄럽게 작동하는 것 같습니다. 이해하게 되어 정말 기쁘고, 이제 이것을 사용할 수 있게 되었습니다!

빠른 답변 감사합니다 @sam! 🙌
