diff --git a/css/style.css b/css/style.css
index 9b7f4f0..f034f01 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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; /* 手机端更高 */
}
}
diff --git a/images/ANALYSIS_IMAGES.md b/images/ANALYSIS_IMAGES.md
index 93072ad..5ed1913 100644
--- a/images/ANALYSIS_IMAGES.md
+++ b/images/ANALYSIS_IMAGES.md
@@ -1,9 +1,9 @@
-# 前期分析板块 - 9张图片命名规范
+# 前期分析板块 - 8张图片命名规范
## 🎯 快速使用指南
### 步骤1：准备图片
-将你的9张图片命名为以下格式：
+将你的8张图片命名为以下格式：
```
analysis-01.jpg ← 地理分析图
@@ -14,7 +14,6 @@ analysis-05.jpg ← 分析图5
analysis-06.jpg ← 分析图6
analysis-07.jpg ← 分析图7
analysis-08.jpg ← 分析图8
-analysis-09.jpg ← 分析图9
```
### 步骤2：放入文件夹
@@ -27,44 +26,47 @@ Live Server 会自动刷新，立即看到效果！
## 📏 图片规格要求
-### 推荐尺寸
-- **最小宽度**: 800px
-- **推荐尺寸**: 1200×800px（3:2比例）或 1024×768px（4:3比例）
-- **文件大小**: 建议 < 500KB/张
-- **格式**: JPG 或 PNG
-
-### ⚠️ 重要说明
-**不用担心图片大小不一致！**
+### ✅ 重要特性
+**图片会完整展示，不会被裁剪！**
我已经设置了CSS样式：
```css
.analysis-img img {
- width: 100%;
- height: 100%;
- object-fit: cover; /* 自动裁剪，保持比例 */
- object-position: center; /* 居中显示 */
+ max-width: 100%;
+ max-height: 100%;
+ object-fit: contain; /* 完整展示，不裁剪 */
+}
+
+.analysis-img {
+ background: #FFFFFF; /* 白色背景填充 */
}
```
**效果**：
-- ✅ 所有图片高度统一为 280px
-- ✅ 图片自动缩放并裁剪，不变形
+- ✅ 所有图片**完整展示**，不会有任何部分被裁剪
+- ✅ 如果图片比例与容器不一致，会出现**白色边距**
+- ✅ 所有图片高度统一为 **280px**（桌面端）
- ✅ 所有卡片底部对齐
- ✅ 无论原图是横图还是竖图都能正常显示
+### 推荐尺寸
+- **任意尺寸都可以**（系统会自动适配）
+- **推荐比例**: 4:3 或 3:2（白边较少）
+- **最小宽度**: 600px
+- **文件大小**: 建议 < 500KB/张
+- **格式**: JPG 或 PNG
+
---
## 🎨 当前布局
### 桌面端（>1024px）
```
-─────────┬─────────┬─────────┐
-│ 01 │ 02 │ 03 │
-├──────────────────┼─────────┤
-│ 04 │ 05 │ 06 │
-├─────────┼─────────┼─────────┤
-│ 07 │ 08 │ 09 │
-└─────────┴─────────┴─────────┘
+─────────┬─────────┬─────────┬─────────┐
+│ 01 │ 02 │ 03 │ 04 │
+├─────────┼─────────┼─────────┼─────────┤
+│ 05 │ 06 │ 07 │ 08 │
+└─────────┴─────────┴─────────┴─────────┘
```
### 平板端（768-1024px）
@@ -75,11 +77,9 @@ Live Server 会自动刷新，立即看到效果！
│ 03 │ 04 │
├─────────┼─────────┤
│ 05 │ 06 │
-├─────────┼─────────
-│ 07 │ 08 │
├─────────┼─────────┤
-│ 09 │ │
-└─────────┴─────────
+│ 07 │ 08 │
+└─────────┴─────────┘
```
### 手机端（<768px）
@@ -93,7 +93,7 @@ Live Server 会自动刷新，立即看到效果！
├─────────┤
│ ... │
├─────────┤
-│ 09 │
+│ 08 │
└─────────┘
```
@@ -160,9 +160,24 @@ Live Server 会自动刷新，立即看到效果！
打开 `css/style.css`，找到：
```css
+/* 桌面端 */
.analysis-img {
height: 280px; /* 改为 250px、300px、350px 等 */
}
+
+/* 平板端 */
+@media (max-width: 1024px) {
+ .analysis-img {
+ height: 300px; /* 改为 280px、320px 等 */
+ }
+}
+
+/* 手机端 */
+@media (max-width: 768px) {
+ .analysis-img {
+ height: 350px; /* 改为 300px、400px 等 */
+ }
+}
```
### 如果想调整列间距
@@ -189,14 +204,14 @@ Live Server 会自动刷新，立即看到效果！
当你看到以下内容时，表示成功：
-✅ 9张图片全部显示
-✅ 所有图片高度一致
+✅ 8张图片全部显示
+✅ 所有图片**完整展示**，无裁剪
+✅ 图片周围有**白色边距**（如需要）
✅ 所有卡片底部对齐
✅ 响应式布局正常（桌面/平板/手机）
-✅ 图片不变形、不拉伸
---
-**祝你顺利添加图片！** 📸✨
+**祝你顺利添加图片！** ✨
*如有问题，随时告诉我！*
diff --git a/images/航拍图.png b/images/analysis-01.jpg
similarity index 100%
rename from images/航拍图.png
rename to images/analysis-01.jpg
diff --git a/images/气温和降水月平均分布.png b/images/analysis-02.jpg
similarity index 100%
rename from images/气温和降水月平均分布.png
rename to images/analysis-02.jpg
diff --git a/images/analysis-03.jpg b/images/analysis-03.jpg
new file mode 100644
index 0000000..47fd39a
Binary files /dev/null and b/images/analysis-03.jpg differ
diff --git a/images/analysis-04.jpg b/images/analysis-04.jpg
new file mode 100644
index 0000000..a44dec6
Binary files /dev/null and b/images/analysis-04.jpg differ
diff --git a/images/analysis-05.png b/images/analysis-05.png
new file mode 100644
index 0000000..cd77706
Binary files /dev/null and b/images/analysis-05.png differ
diff --git a/images/analysis-06.png b/images/analysis-06.png
new file mode 100644
index 0000000..6d3ca81
Binary files /dev/null and b/images/analysis-06.png differ
diff --git a/images/analysis-07.png b/images/analysis-07.png
new file mode 100644
index 0000000..5d885f9
Binary files /dev/null and b/images/analysis-07.png differ
diff --git a/images/analysis-08.png b/images/analysis-08.png
new file mode 100644
index 0000000..bdfd1db
Binary files /dev/null and b/images/analysis-08.png differ
diff --git a/index.html b/index.html
index 3fc85af..fbb8f2b 100644
--- a/index.html
+++ b/index.html
@@ -173,18 +173,6 @@
在此处插入说明文字...
-
-
-
-
-
-
分析图9
-
-
-