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

fix: align image container sizing and page width consistency

Browse Source
This commit is contained in:
jingrow 2025-12-21 16:20:52 +08:00
parent cf2c2022de
commit d8ee975615
1 changed files with 17 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
apps/jingrow/frontend/src/views/HomePage.vue
View File

@ -295,37 +295,28 @@ const adjustContainerSize = async () => {
const maxAvailableWidth = Math.max(0, previewRect.width - padding)
const maxAvailableHeight = Math.max(0, previewRect.height - padding)
// 如果高度为0或太小，多次重试
if (maxAvailableWidth <= 0 || maxAvailableHeight <= 0 || maxAvailableHeight < 100) {
if (maxAvailableWidth > 0 && maxAvailableHeight > 0 && maxAvailableHeight >= 100) {
if (img.complete) {
const { naturalWidth, naturalHeight } = img
if (naturalWidth > 0 && naturalHeight > 0) {
const scale = Math.min(
maxAvailableWidth / naturalWidth,
maxAvailableHeight / naturalHeight,
1
)
singleWrapper.style.width = `${naturalWidth * scale}px`
singleWrapper.style.height = `${naturalHeight * scale}px`
}
} else {
img.addEventListener('load', adjustContainerSize, { once: true })
}
} else {
setTimeout(adjustContainerSize, 100)
return
}
if (!img.complete) {
img.addEventListener('load', adjustContainerSize, { once: true })
return
}
const { naturalWidth, naturalHeight } = img
if (naturalWidth === 0 || naturalHeight === 0) {
setTimeout(adjustContainerSize, 100)
return
}
const scale = Math.min(
maxAvailableWidth / naturalWidth,
maxAvailableHeight / naturalHeight,
1
)
singleWrapper.style.width = `${naturalWidth * scale}px`
singleWrapper.style.height = `${naturalHeight * scale}px`
} else {
// 如果找不到 preview-section，延迟重试
setTimeout(adjustContainerSize, 100)
}
} else {
// 如果图片还没有加载，延迟重试
setTimeout(adjustContainerSize, 100)
}
}
@ -843,8 +834,6 @@ onUnmounted(() => {
.tool-page {
background: white;
border-radius: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
@ -1113,20 +1102,18 @@ onUnmounted(() => {
.preview-section {
flex: 1;
width: 100%;
min-height: 600px; /* 设置更大的最小高度 */
height: auto; /* 允许自动增长 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 0;
padding: 12px;
}
.comparison-view {
width: 100%;
height: 100%;
min-height: 600px; /* 确保对比视图也有足够高度 */
display: flex;
justify-content: center;
align-items: center;
@ -1138,7 +1125,6 @@ onUnmounted(() => {
display: inline-block;
max-width: 100%;
max-height: 100%;
min-height: 500px; /* 设置最小高度确保容器足够大 */
overflow: hidden;
border-radius: 8px;
border: 1px solid #e5e7eb;
@ -1236,7 +1222,6 @@ onUnmounted(() => {
display: inline-block;
max-width: 100%;
max-height: 100%;
min-height: 500px;
overflow: hidden;
border-radius: 8px;
border: 1px solid #e5e7eb;