图片替换指南

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

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

将你的图片放入 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       # 建造场地总图

在 index.html 中替换对应的 div

原代码：

<div class="card-image placeholder-img">
    <span>地理分析图</span>
</div>

替换为：

<div class="card-image">
    <img src="images/analysis-geography.jpg" alt="地理分析图">
</div>

在 CSS 中添加图片样式（在 css/style.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;
}

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

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

<!-- 使用 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	如需添加背景图

💡 图片优化建议

格式选择：
- 照片类：使用 JPG（质量 80-85%）
- 带透明：使用 PNG
- 最优选择：使用 WebP（体积更小）
压缩工具：
- TinyPNG (https://tinypng.com/)
- Squoosh (https://squoosh.app/)
- ImageOptim (Mac)
命名规范：
- 使用小写字母
- 用连字符 - 分隔单词
- 避免中文和特殊字符
- 例如：design-aerial-view.jpg

🔧 常见问题

Q: 图片显示变形怎么办？

A: 确保使用了 object-fit: cover 属性，它会自动裁剪图片以适应容器。

Q: 如何让图片点击放大？

A: 可以添加简单的灯箱效果，需要额外的 JavaScript 代码。

Q: 图片加载太慢怎么办？

压缩图片大小
使用 WebP 格式
实现懒加载（代码已预留）

Q: 如何添加图片说明文字？

A: 在 <img> 标签后添加 <figcaption>：

<div class="card-image">
    <img src="images/example.jpg" alt="示例图片">
    <p class="image-caption">这是图片说明</p>
</div>

然后在 CSS 中添加：

.image-caption {
    padding: 0.5rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

3.8 KiB Raw Blame History Unescape Escape