图片缩放在自定义页面宽度的情况下存在bug

[WeiCJ2020]

Is there an existing issue for this?

• I have searched the existing issues

Can the issue be reproduced with the default theme (daylight/midnight)?

• I was able to reproduce the issue with the default theme

Could the issue be due to extensions?

• I've ruled out the possibility that the extension is causing the problem.

Describe the problem

发生场景：自定义页面宽度
现象：图片的右边界计算会把父元素的padding计算进去，拖动的时候导致图片缩放宽度正好差一个页边距。
原因：mostRight的计算在调整页面宽度后存在bug

// 不能用 firstElement，否则 https://ld246.com/article/1668758661338
 const mostRight = mostLeft + (protyle.wysiwyg.element.clientWidth - (parseInt(protyle.wysiwyg.element.style.paddingLeft) || 24) - (parseInt(protyle.wysiwyg.element.style.paddingRight) || 16)) - 2;

自定义css如下：

.protyle-title__input{
    display: none;
}
/* .layout-tab-container :has([custom-template="a4"]){

    width: 210mm;
    margin-left: calc(100% - 210mm)/2;
} */
[custom-template="a4"] {
    max-width: 210mm;
    min-height: 297mm;
    /* A4 高度 */
    margin-top: 20mm;

    padding: 18mm 15mm 15mm 15mm !important;
    /* 内边距 */
    background-color: #fdfffb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius: 8px;
    font-family: "Noto Serif", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

[custom-template="a4"] .h1 {
    font-size: 15pt;
    /* 四号字体 */
    font-weight: bold;
    /* 加粗 */
    margin-top: 16pt;
    margin-bottom: 12pt;
}
[custom-template="a4"] .h2 {
    font-size: 14pt;
    /* 四号字体 */
    font-weight: bold;
    /* 加粗 */
    margin-top: 12pt;
    margin-bottom: 10pt;
}
[custom-template="a4"] .h3 {
    font-size: 14pt;
    /* 四号字体 */
    margin-top: 10pt;
    margin-bottom: 8pt;
}
[custom-template="a4"] .p {
    line-height: 1.5;
    /* 设置行间距为1.25倍 */
    font-size: 12pt;
    /* 设置默认字体大小 */
    text-indent: 2em;
    /* 首行缩进2个字符 */
}
/* 当p元素的二级子元素包含img时，取消缩进和其他特殊样式 */
[custom-template="a4"] .p :has(img) {
    text-indent: 0;
    line-height: normal;
}

/* 添加图片的样式规则 */
/* 移除图片容器的span宽度限制 */
/* [custom-template="a4"] [data-type="img"] > span {

    display: inline-block;
} */

Expected result

调整mostright的计算方式，在页面宽度调整的情况下也可以正常缩放图片

Screenshot or screen recording presentation

No response

Version environment

- Version: 3.1.19
- Operating System: Windows Server 2025 Standard
- Browser (if used):

Log file

siyuan.log

More information

No response

[Vanessa219]

看上去是正常的，是有什么步骤或插件需要安装么？

Jietu20250401-120813-HD.mp4

[TCOTC]

我这边使用 CSS，并给段落块添加 template="a4" 自定义属性之后也无法重现问题

[88250]

楼主升级下版本后再试试？

我先关闭了，还有问题麻烦随时跟帖，谢谢。

[WeiCJ2020]

不好意思，刚才的css版本上传错了，少了一个margin-left。更新了版本还是存在这个问题。

.protyle-title__input{
    display: none;
}
[custom-template="a4"] {
    max-width: 210mm;
    min-height: 297mm;
    /* A4 高度 */
    margin-top: 20mm;
    margin-left: calc((100% - 210mm) / 2);
    padding: 18mm 15mm 15mm 15mm !important;
    /* 内边距 */
    background-color: #fdfffb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius: 8px;
    font-family: "Noto Serif", "Noto Serif CJK SC", "Source Han Serif SC", serif;
}

[custom-template="a4"] .h1 {
    font-size: 1.25em;
    /* 四号字体 */
    font-weight: bold;
    /* 加粗 */
    margin-top: 16pt;
    margin-bottom: 12pt;
}
[custom-template="a4"] .h2 {
    font-size: 1.2em;
    /* 四号字体 */
    font-weight: bold;
    /* 加粗 */
    margin-top: 12pt;
    margin-bottom: 10pt;
}
[custom-template="a4"] .h3 {
    font-size: 1.2em;
    /* 四号字体 */
    margin-top: 10pt;
    margin-bottom: 8pt;
}
[custom-template="a4"] .p {
    line-height: 1.5;
    /* 设置行间距为1.25倍 */
    font-size: 1em;
    /* 设置默认字体大小 */
    text-indent: 2em;
    /* 首行缩进2个字符 */
}
/* 当p元素的二级子元素包含img时，取消缩进和其他特殊样式 */
[custom-template="a4"] .p :has(img) {
    text-indent: 0;
    line-height: normal;
}

/* 添加图片的样式规则 */
/* 移除图片容器的span宽度限制 */
/* [custom-template="a4"] [data-type="img"] > span {

    display: inline-block;
} */

[TCOTC]

我这里看起来好像没有问题：

video.webm

[WeiCJ2020]

我这里看起来好像没有问题：

video.webm

我是在页面的属性里面添加的,好像就有这个问题了

[TCOTC]

试出来了，给编辑器设置 margin-left 之后，图片的右侧也会留出相同的宽度：

.protyle-wysiwyg {
    margin-left: 300px;
}

video.webm

[WeiCJ2020]

试出来了，给编辑器设置 margin-left 之后，图片的右侧也会留出相同的宽度：

.protyle-wysiwyg {
margin-left: 300px;
}
video.webm

是的，这个相当于图片的父元素的padding或者margin影响了图片缩放时最右边界的计算（ts文件中的mostRight变量）

[TCOTC]

给编辑器设置 margin-left 之后，图片的右侧也会留出相同的宽度

@Vanessa219

[TCOTC]

@Vanessa219

[TCOTC]

#14851