调整为8张图片,使用object-fit: contain确保完整展示,白底填充

This commit is contained in:
2026-06-02 21:00:06 +08:00
parent d32736b2d0
commit ec29003082
11 changed files with 66 additions and 54 deletions

View File

@@ -529,11 +529,11 @@ body {
}
/* ========================================
前期分析板块 - 9张图片统一格式
前期分析板块 - 8张图片统一格式(完整展示+白底)
======================================== */
.analysis-grid {
/* 3列布局,确保图片上下底平齐 */
grid-template-columns: repeat(3, 1fr) !important;
/* 4列布局,确保图片上下底平齐 */
grid-template-columns: repeat(4, 1fr) !important;
gap: var(--spacing-md);
}
@@ -543,14 +543,19 @@ body {
width: 100%;
overflow: hidden;
position: relative;
background: linear-gradient(135deg, var(--primary-muted) 0%, var(--primary-light) 100%);
background: #FFFFFF; /* 白色背景 */
display: flex;
align-items: center;
justify-content: center;
}
.analysis-img img {
/* 关键使用object-fit: cover确保图片填满容器且不变形 */
width: 100%;
height: 100%;
object-fit: cover;
/* 关键使用object-fit: contain确保图片完整展示不裁剪 */
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain; /* 完整展示,允许白边 */
object-position: center;
display: block;
}
@@ -573,6 +578,10 @@ body {
.analysis-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.analysis-img {
height: 300px; /* 平板端稍高一些 */
}
}
/* 响应式手机设备改为1列 */
@@ -582,6 +591,6 @@ body {
}
.analysis-img {
height: 250px;
height: 350px; /* 手机端更高 */
}
}