yangyuqing/new-site

Fork 0

Files

yangyuqing ec29003082 调整为8张图片，使用object-fit: contain确保完整展示，白底填充

2026-06-02 21:00:06 +08:00

4.9 KiB

Raw Blame History

前期分析板块 - 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样式：

.analysis-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;  /* 完整展示，不裁剪 */
}

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

效果：

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

🎨 当前布局

桌面端（>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张图

<!-- 图片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 等 */
}

/* 平板端 */
@media (max-width: 1024px) {
    .analysis-img {
        height: 300px;  /* 改为 280px、320px 等 */
    }
}

/* 手机端 */
@media (max-width: 768px) {
    .analysis-img {
        height: 350px;  /* 改为 300px、400px 等 */
    }
}

如果想调整列间距

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

如果想让某张图跨两列

在 HTML 中添加样式：

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

🎊 完成标志

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

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

祝你顺利添加图片！ ✨

如有问题，随时告诉我！

4.9 KiB Raw Blame History Unescape Escape