yangyuqing/new-site

Fork 0

Files

yangyuqing d32736b2d0 添加前期分析板块9张图片结构，统一格式确保底部对齐

2026-06-02 20:49:35 +08:00

4.5 KiB

Raw Blame History

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

🎯 快速使用指南

步骤1：准备图片

将你的9张图片命名为以下格式：

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
analysis-09.jpg  ← 分析图9

步骤2：放入文件夹

将所有图片放入：d:\my_website\images\ 文件夹

步骤3：刷新浏览器

Live Server 会自动刷新，立即看到效果！

📏 图片规格要求

⚠️ 重要说明

不用担心图片大小不一致！

我已经设置了CSS样式：

.analysis-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* 自动裁剪，保持比例 */
    object-position: center;  /* 居中显示 */
}

效果：

✅ 所有图片高度统一为 280px
✅ 图片自动缩放并裁剪，不变形
✅ 所有卡片底部对齐
✅ 无论原图是横图还是竖图都能正常显示

🎨 当前布局

桌面端（>1024px）

─────────┬─────────┬─────────┐
│  01     │  02     │  03     │
├──────────────────┼─────────┤
│  04     │  05     │  06     │
├─────────┼─────────┼─────────┤
│  07     │  08     │  09     │
└─────────┴─────────┴─────────┘

平板端（768-1024px）

─────────┬─────────┐
│  01     │  02     │
├─────────┼─────────┤
│  03     │  04     │
├─────────┼─────────┤
│  05     │  06     │
├─────────┼─────────
│  07     │  08     │
├─────────┼─────────┤
│  09     │         │
└─────────┴─────────

手机端（<768px）

┌─────────┐
│  01     │
├─────────┤
│  02     │
├─────────┤
│  03     │
├─────────┤
│  ...    │
├─────────┤
│  09     │
└─────────┘

✏️ 修改文字内容

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

示例：修改第4张图

<!-- 图片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>

🔍 如果图片未显示

检查清单

文件名是否正确？

✓ analysis-01.jpg
✗ Analysis-01.jpg  (大写A)
✗ analysis_01.jpg  (下划线)
✗ analysis-1.jpg   (缺少0)

文件是否在正确位置？

d:\my_website\images\analysis-01.jpg  ✓
d:\my_website\analysis-01.jpg         ✗

文件格式是否正确？

✓ .jpg
✓ .jpeg
✓ .png
✗ .JPG  (大写扩展名可能有问题)

浏览器控制台是否有错误？

按 F12 → Console
查看是否有 404 错误

💡 高级技巧

如果想调整图片高度

打开 css/style.css，找到：

.analysis-img {
    height: 280px;  /* 改为 250px、300px、350px 等 */
}

如果想调整列间距

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

如果想让某张图跨两列

在 HTML 中添加样式：

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

🎊 完成标志

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

✅ 9张图片全部显示
✅ 所有图片高度一致
✅ 所有卡片底部对齐
✅ 响应式布局正常（桌面/平板/手机）
✅ 图片不变形、不拉伸

祝你顺利添加图片！ 📸✨

如有问题，随时告诉我！

4.5 KiB Raw Blame History Unescape Escape