按像素而非百分比调整图片大小的 Markdown 方法

Quick image resizing and markdown image dimensions talked about the new “Ninja :crossed_swords: 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?

1 个赞

That is already supported:

![very good|25x19](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

produces

very good

while

![very good|250x190](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

produces

very good

7 个赞

You can’t just specify the width though.

4 个赞

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.

3 个赞

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?

14 个赞

This is now done and in tests-passed.

10 个赞

:thinking: I am having a bit of trouble with this…

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

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

1 个赞

Not performant! :rofl:

4 个赞

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

image

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

1 个赞

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”.

2 个赞

the same question i want to ,just tell picture ,it is 200px width ,and skip height

我也想要这个功能。

简单回顾一下,目前缩放图像的语法(为便于阅读添加了空格)是:

! [ 图像名称 | 宽度x高度, 缩放百分比 ] ( 图像位置 )

我认为如果能只缩放宽度或高度,并在对应的维度中输入“auto”这个词,那将非常棒。

例如,假设我希望这张图像的宽度为 150 像素,但我不想计算比例来调整高度以匹配正确的分辨率…
![very good|250x190](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

我希望能够将宽度替换为 150,将高度替换为 auto,如下所示…
![very good|150xauto](//assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/0/3/03741c9f3eafd7fc8ccd791a6971a2c0d52783e4.jpg)

@Falco 有什么想法吗?

我仍然认为原始提案更容易解释。

粘贴:

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

然后编辑为:

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

根据这个方法现在确实可以工作,但解释起来稍微复杂一些:

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

@jord8on 这一切已经可以正常工作了,你想要的语法是:

[very good|250x190,150x]

4 个赞

啊,@sam,谢谢你的指引。如果我理解得没错,当前的功能简直完美!

让我确认一下我的理解是否正确……

  • “x” 代表 “auto”(自动)
  • 如果将 “x” 放在数字前面,则表示宽度。例如:x150 = "width: auto; height: 150px;"
  • 如果将 “x” 放在数字后面,则表示高度。例如:150x = "width: 150px; height: auto;"

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

让我们用这张尺寸为 "width:600px; height: 200px;" 的图片来测试一下。

默认的嵌入语法是:

![we love discourse|600x200](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)

显示效果如下:

下面这张图片的宽度被缩放到 200px(高度 = x = 自动):

![we love discourse|600x200,200x](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)

显示效果如下:

下面这张图片的高度被缩放到 100px(宽度 = x = 自动):

![we love discourse|600x200,x100](upload://gvBLukUHTZLicvbieEMWVlBj9OK.png)

显示效果如下:

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

看起来效果非常好。很高兴终于弄明白了,现在可以开始使用了!

感谢 @sam 的快速回复!:raising_hands:

9 个赞