# 图片替换指南

## 📸 如何替换占位图为实际图片

### 方法一：直接替换（推荐）

1. **将你的图片放入 `images/` 文件夹**
   ```
   images/
   ├── analysis-geography.jpg      # 地理分析图
   ├── analysis-climate.jpg        # 气候分析图
   ├── analysis-site.jpg           # 选址分析图
   ├── design-aerial.jpg           # 鸟瞰渲染图
   ├── design-interior-1.jpg       # 室内渲染图1
   ├── design-interior-2.jpg       # 室内渲染图2
   ├── design-elevation.jpg        # 立面效果图
   ├── design-detail.jpg           # 细节特写
   ├── drawing-site-plan.jpg       # 总平面图
   ├── drawing-floor-plan.jpg      # 平面图
   ├── performance-structure.jpg   # 结构受力分析图
   ├── performance-energy.jpg      # 节能计算图表
   ├── self-solar.jpg              # 太阳能系统示意图
   ├── self-water.jpg              # 水循环系统图
   └── construction-site.jpg       # 建造场地总图
   ```

2. **在 index.html 中替换对应的 div**

   **原代码：**
   ```html
   <div class="card-image placeholder-img">
       <span>地理分析图</span>
   </div>
   ```

   **替换为：**
   ```html
   <div class="card-image">
       <img src="images/analysis-geography.jpg" alt="地理分析图">
   </div>
   ```

3. **在 CSS 中添加图片样式**（在 `css/style.css` 末尾添加）：
   ```css
   /* 卡片图片样式 */
   .card-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   /* 画廊图片样式 */
   .gallery-item img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: var(--border-radius);
       display: block;
   }
   ```

### 方法二：使用在线图片测试

如果你想先测试效果，可以使用在线占位图服务：

```html
<!-- 使用 placehold.co 服务 -->
<div class="card-image">
    <img src="https://placehold.co/800x600/8A9B7E/FFFFFF?text=地理分析图" alt="地理分析图">
</div>
```

## 🎨 图片尺寸建议

| 位置 | 建议尺寸 | 说明 |
|------|---------|------|
| 卡片图片 | 800×600px | 4:3 比例，适合大多数内容 |
| 宽卡片图片 | 1200×600px | 2:1 比例，用于图纸展示 |
| 画廊小图 | 600×600px | 1:1 正方形 |
| 画廊大图 | 1200×900px | 4:3 比例，鸟瞰图等 |
| Hero背景 | 1920×1080px | 如需添加背景图 |

## 💡 图片优化建议

1. **格式选择**：
   - 照片类：使用 JPG（质量 80-85%）
   - 带透明：使用 PNG
   - 最优选择：使用 WebP（体积更小）

2. **压缩工具**：
   - TinyPNG (https://tinypng.com/)
   - Squoosh (https://squoosh.app/)
   - ImageOptim (Mac)

3. **命名规范**：
   - 使用小写字母
   - 用连字符 `-` 分隔单词
   - 避免中文和特殊字符
   - 例如：`design-aerial-view.jpg`

## 🔧 常见问题

### Q: 图片显示变形怎么办？
A: 确保使用了 `object-fit: cover` 属性，它会自动裁剪图片以适应容器。

### Q: 如何让图片点击放大？
A: 可以添加简单的灯箱效果，需要额外的 JavaScript 代码。

### Q: 图片加载太慢怎么办？
A: 
1. 压缩图片大小
2. 使用 WebP 格式
3. 实现懒加载（代码已预留）

### Q: 如何添加图片说明文字？
A: 在 `<img>` 标签后添加 `<figcaption>`：
```html
<div class="card-image">
    <img src="images/example.jpg" alt="示例图片">
    <p class="image-caption">这是图片说明</p>
</div>
```

然后在 CSS 中添加：
```css
.image-caption {
    padding: 0.5rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
```

---

**提示**: 在替换完所有图片后，建议在手机和电脑上分别测试显示效果。