new-site/images/ANALYSIS_IMAGES.md

#  前期分析板块 - 8张图片命名规范

## 🎯 快速使用指南

### 步骤1：准备图片
将你的8张图片命名为以下格式：

```
analysis-01.jpg  ← 地理分析图
analysis-02.jpg  ← 气候分析图
analysis-03.jpg  ← 选址分析图
analysis-04.jpg  ← 分析图4
analysis-05.jpg  ← 分析图5
analysis-06.jpg  ← 分析图6
analysis-07.jpg  ← 分析图7
analysis-08.jpg  ← 分析图8
```

### 步骤2：放入文件夹
将所有图片放入：`d:\my_website\images\` 文件夹

### 步骤3：刷新浏览器
Live Server 会自动刷新，立即看到效果！

---

## 📏 图片规格要求

### ✅ 重要特性
**图片会完整展示，不会被裁剪！**

我已经设置了CSS样式：
```css
.analysis-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;  /* 完整展示，不裁剪 */
}

.analysis-img {
    background: #FFFFFF;  /* 白色背景填充 */
}
```

**效果**：
- ✅ 所有图片**完整展示**，不会有任何部分被裁剪
- ✅ 如果图片比例与容器不一致，会出现**白色边距**
- ✅ 所有图片高度统一为 **280px**（桌面端）
- ✅ 所有卡片底部对齐
- ✅ 无论原图是横图还是竖图都能正常显示

### 推荐尺寸
- **任意尺寸都可以**（系统会自动适配）
- **推荐比例**: 4:3 或 3:2（白边较少）
- **最小宽度**: 600px
- **文件大小**: 建议 < 500KB/张
- **格式**: JPG 或 PNG

---

## 🎨 当前布局

### 桌面端（>1024px）
```
─────────┬─────────┬─────────┬─────────┐
│  01     │  02     │  03     │  04     │
├─────────┼─────────┼─────────┼─────────┤
│  05     │  06     │  07     │  08     │
└─────────┴─────────┴─────────┴─────────┘
```

### 平板端（768-1024px）
```
─────────┬─────────┐
│  01     │  02     │
├─────────┼─────────┤
│  03     │  04     │
├─────────┼─────────┤
│  05     │  06     │
├─────────┼─────────┤
│  07     │  08     │
└─────────┴─────────┘
```

### 手机端（<768px）
```
┌─────────┐
│  01     │
├─────────┤
│  02     │
├─────────┤
│  03     │
├─────────┤
│  ...    │
├─────────┤
│  08     │
└─────────┘
```

---

## ✏️ 修改文字内容

如果需要修改每张图的标题和说明，打开 `index.html`，找到对应位置：

### 示例：修改第4张图
```html
<!-- 图片4 -->
<div class="card">
    <div class="card-image analysis-img">
        <img src="images/analysis-04.jpg" alt="分析图4" ...>
    </div>
    <div class="card-content">
        <h3>标题4</h3>           ← 修改这里
        <p>在此处插入说明文字...</p>  ← 修改这里
    </div>
</div>
```

---

## 🔍 如果图片未显示

### 检查清单

1. **文件名是否正确？**
   ```
   ✓ analysis-01.jpg
   ✗ Analysis-01.jpg  (大写A)
   ✗ analysis_01.jpg  (下划线)
   ✗ analysis-1.jpg   (缺少0)
   ```

2. **文件是否在正确位置？**
   ```
   d:\my_website\images\analysis-01.jpg  ✓
   d:\my_website\analysis-01.jpg         ✗
   ```

3. **文件格式是否正确？**
   ```
   ✓ .jpg
   ✓ .jpeg
   ✓ .png
   ✗ .JPG  (大写扩展名可能有问题)
   ```

4. **浏览器控制台是否有错误？**
   ```
   按 F12 → Console
   查看是否有 404 错误
   ```

---

## 💡 高级技巧

### 如果想调整图片高度

打开 `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 等 */
    }
}
```

### 如果想调整列间距

```css
.analysis-grid {
    gap: var(--spacing-md);  /* 改为 1rem、3rem 等 */
}
```

### 如果想让某张图跨两列

在 HTML 中添加样式：

```html
<div class="card" style="grid-column: span 2;">
    <!-- 内容 -->
</div>
```

---

## 🎊 完成标志

当你看到以下内容时，表示成功：

✅ 8张图片全部显示  
✅ 所有图片**完整展示**，无裁剪  
✅ 图片周围有**白色边距**（如需要）  
✅ 所有卡片底部对齐  
✅ 响应式布局正常（桌面/平板/手机）  

---

**祝你顺利添加图片！** ✨

*如有问题，随时告诉我！*