jlocal/jingrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ensure original and result images have consistent sizes

Browse Source
This commit is contained in:
jingrow 2025-11-19 19:32:50 +08:00
parent 3e24fbb9ba
commit 87e54ff9ec
1 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
apps/jingrow/frontend/src/views/tools/RemoveBackground.vue
View File

@ -927,10 +927,9 @@ h1 {
.comparison-container { .comparison-container {
position: relative; position: relative;
width: 100%; display: inline-block;
height: 100%; max-width: min(90vw, calc(100vh - 200px));
max-width: 100%; max-height: min(90vw, calc(100vh - 200px));
max-height: 100%;
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
border: 1px solid #e5e7eb; border: 1px solid #e5e7eb;
@ -949,23 +948,54 @@ h1 {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
img { img {
width: 100%;
height: 100%;
object-fit: contain;
display: block; display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
} }
} }
.original-image { .original-image {
position: relative;
z-index: 1; z-index: 1;
width: auto;
height: auto;
/* clip-path 通过内联样式动态设置，用于裁剪显示区域 */ /* clip-path 通过内联样式动态设置，用于裁剪显示区域 */
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
} }
.result-image { .result-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2; z-index: 2;
/* clip-path 通过内联样式动态设置，用于裁剪显示区域 */ /* clip-path 通过内联样式动态设置，用于裁剪显示区域 */
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
} }
/* 拖动竖线 */ /* 拖动竖线 */