调整为8张图片,使用object-fit: contain确保完整展示,白底填充
This commit is contained in:
@@ -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; /* 手机端更高 */
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user