ensure original and result images have consistent sizes

This commit is contained in:
jingrow 2025-11-19 19:32:50 +08:00
parent 3e24fbb9ba
commit 87e54ff9ec

View File

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