Skip to content

Support setting height for images #12423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
TCOTC opened this issue Sep 8, 2024 · 16 comments
Closed

Support setting height for images #12423

TCOTC opened this issue Sep 8, 2024 · 16 comments
Assignees
Milestone

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Sep 8, 2024

支持为图片设置高度

背景

有时候会需要在一个段落块里插入多张图片,或者把多个包含图片的段落块组合成超级块,想要把图片对齐。

但只靠调整图片的宽度很难让每张图片的高度一致,因此会参差不齐。

方案

  • 支持为图片设置高度
  • 支持恢复默认高度
  • 支持拖拽调整图片高度

另外:同时设置图片的高度和宽度会有冲突,所以设置高度之后要清除设置的宽度、设置宽度之后要清除设置的高度


还能顺带实现一些其他的用户需求

fe828a0aff0e8b55a43b94efc73c83d

笔记支持嵌入网页,图片拖拽调整高度和宽度 - 链滴

希望可以设置图片的默认大小 - 链滴

图片可以自动设置宽度吗? - 链滴

请问复制的图片的默认大小可以设置吗 - 链滴

备注:目前默认宽度可以用 CSS 实现,如果之后支持设置图片高度,那么默认高度也应该可以用 CSS 实现

@88250
Copy link
Member

88250 commented Sep 8, 2024

之前讨论过,会有其他问题,所以不再考虑了 #4878 (comment)

@88250 88250 closed this as not planned Won't fix, can't repro, duplicate, stale Sep 8, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 8, 2024

没看明白 #4878 (comment) 跟我这个 issue 有什么关系,#4878 里都根本没提到高度

@88250
Copy link
Member

88250 commented Sep 8, 2024

默认图片大小会有影响

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 8, 2024

用户通过 CSS 来设置默认图片大小,遇到的问题用户自己解决就好了,不是思源该管的事情了。

目前的需求就是支持为单张图片设置高度。

@88250
Copy link
Member

88250 commented Sep 8, 2024

@Vanessa219 评估一下可行性

@Vanessa219
Copy link
Member

为保持图片比例,应该是设置宽度就可以了,宽度变了,高度也会变。如果宽度和高度都设置的话,比例就不对了。

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 8, 2024

@Vanessa219 我补充了这一点:

image

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 8, 2024

对了,高度是用 px 或 vh 这种感觉更好,因为是用来保持多图高度一致的,所以不能以 20% 50% 这种相对于原图高度/相对于块高度的比例作为高度

p.s. 完了我不知道怎么表达这个

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 8, 2024

总之就是有的时候需求是让多图的高度完全一致,这靠调整宽度是很难做到的

image

@KuiyueRO
Copy link

KuiyueRO commented Sep 8, 2024

完了我也是。差不多意思就是超级块中有几张图,这几张图在统一高度的情况下去计算几张图片的宽度px。

另外如果可以,根据宽度的px去计算占比百分之多少,自动设置块宽度。其实不仅是图片,有的时候文字等也需要统一高度,这个很有用,大幅减少排版的时间。

我理解的是这个意思哈。

@Vanessa219
Copy link
Member

Vanessa219 commented Sep 11, 2024

自动的设置这个可能每个人对每种块想要的宽度不一样,还是用户自己设置吧。
高度的话就先添加一个菜单吧。

@Vanessa219 Vanessa219 reopened this Sep 11, 2024
@Vanessa219 Vanessa219 self-assigned this Sep 11, 2024
@Vanessa219 Vanessa219 added this to the 3.1.7 milestone Sep 11, 2024
@Vanessa219 Vanessa219 changed the title 支持为图片设置高度 增加图片和块的高度设置 Sep 11, 2024
Vanessa219 added a commit that referenced this issue Sep 11, 2024
@Vanessa219 Vanessa219 changed the title 增加图片和块的高度设置 增加图片高度的设置 Sep 11, 2024
@88250 88250 changed the title 增加图片高度的设置 Support setting height for images Sep 11, 2024
@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 13, 2024

我想了想,应该会有用户想同时设置高度和宽度来拉伸图片,建议还是支持同时设置高度和宽度,不用清除其一了。

如果宽度和高度都设置的话,比例就不对了

比例的问题就交给用户自己决定,反正可以将高度或宽度恢复默认。

不过目前点击高度或宽度的 默认 都会使高度和宽度同时恢复默认,我认为分开来处理会更合理。

然后再把这个竖条的作用改为等比例缩放(目前的作用只是调整宽度):

image


另外还有点问题:

01 选中文本时鼠标移到输入框外可能会关闭菜单、点击输入框再点击外部会关闭菜单

default.webm

02 需要支持通过删除已填写的具体数值来恢复默认

default.webm

Vanessa219 added a commit that referenced this issue Sep 16, 2024
@Vanessa219
Copy link
Member

1, 2 已改进。高宽同时设置先不支持了,毕竟大部分用户是不希望图片变形的。

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 16, 2024

高宽同时设置先不支持了,毕竟大部分用户是不希望图片变形的。

那么基于这一点,还有一个问题是拖拽图片宽度(有个小竖条)时,不会清除高度,导致图片比例不正确:

default.webm

@TCOTC
Copy link
Contributor Author

TCOTC commented Sep 16, 2024

还有,这个输入框和下面的文本没有对齐,看起来有点别扭:

image

Vanessa219 added a commit that referenced this issue Sep 19, 2024
@Vanessa219
Copy link
Member

这个是为了和 focus 后的外层高亮对齐

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants