138 lines
3.8 KiB
Markdown
138 lines
3.8 KiB
Markdown
# 图片替换指南
|
||
|
||
## 📸 如何替换占位图为实际图片
|
||
|
||
### 方法一：直接替换（推荐）
|
||
|
||
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;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
**提示**: 在替换完所有图片后，建议在手机和电脑上分别测试显示效果。
|