ensure original and result images have consistent sizes
This commit is contained in:
parent
3e24fbb9ba
commit
87e54ff9ec
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 拖动竖线 */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user