核心思路
无论使用哪种方法,核心思路都是一样的：
- 织梦标签调用图片：使用
{dede:field name='litpic' /}或{dede:field name='picname' /}获取图片的原始路径。 - HTML结构：将图片放入一个容器（如
<div>）中。 - CSS样式控制：使用CSS的
width: 100%;或max-width: 100%;来强制图片宽度适应容器宽度，并保持其原始比例。
直接在文章内容页（article_article.htm）中修改（最常用）
这种方法适用于文章内容页的缩略图,通常与文章标题、内容等放在一起。
步骤 1：修改模板文件
打开你当前使用的模板目录下的文章内容页文件,通常是 /templets/default/article_article.htm。
找到调用缩略图的地方,它可能看起来像这样：
<img src="{dede:field name='litpic' /}" alt="{dede:field name='title' /}" />
将其修改为以下结构,用一个 div 包裹 img，并给这个 div 添加一个 class，方便我们用CSS控制。
<div class="article-thumb">
<img src="{dede:field name='litpic' /}" alt="{dede:field name='title' /}" />
</div>
步骤 2：添加CSS样式
在模板文件的 <head> 标签内，或者在网站的公共CSS文件（如 /templets/default/style/dedecms.css）中，添加以下CSS代码。
方案A：让图片宽度100%填充容器，高度自动调整（推荐）
.article-thumb img {
width: 100%; /* 强制图片宽度为容器的100% */
height: auto; /* 高度自动调整，以保持图片原始宽高比，防止变形 */
display: block; /* 防止图片下方出现不必要的空白间隙 */
max-width: 100%; /* 确保图片不会超出其父容器的宽度（一个保险措施） */
}
方案B：使用 object-fit 属性（更高级的控制）
如果你的图片尺寸不一,希望图片能够裁剪以完全填满容器而不变形，可以使用 object-fit，这个属性非常适合用作封面图。
.article-thumb {
width: 100%; /* 设置容器的宽度 */
height: 200px; /* 设置容器的高度，固定高度可以实现整齐的布局 */
overflow: hidden; /* 隐藏超出容器部分 */
}
.article-thumb img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键属性：让图片覆盖整个容器，超出部分被裁剪，且不变形 */
display: block;
}
object-fit 的其他值：
contain: 图片会完整显示在容器内，可能会有留白。fill: 默认值，图片会被拉伸以填满容器，可能导致变形。none: 图片保持原始尺寸。scale-down: 效果类似none或contain中较小的一个。
在列表页（list_*.htm）或首页（index.htm）中实现
列表页的缩略图通常是在循环 {dede:list} 或 {dedarclist} 中调用的。
步骤 1：修改列表页模板
打开列表页模板文件,如 /templets/default/list_article.htm。
找到缩略图调用的代码,通常是这样的：
<img src="[field:litpic/]" alt="[field:title/]"/>
同样,我们用一个 div 包裹它，并加上 class。
<div class="list-thumb">
<img src="[field:litpic/]" alt="[field:title/]" />
</div>
步骤 2：添加CSS样式
在网站的公共CSS文件中添加以下样式（与方法一的CSS相同）。
.list-thumb img {
width: 100%;
height: auto;
display: block;
max-width: 100%;
}
如果你想在列表页实现固定大小的封面图效果,可以使用方法一中的 object-fit: cover 方案。
使用织梦的自定义属性（更灵活）
你可能希望某些图片有特殊的行为,或者你想把样式直接写在标签里，而不是通过一个外部CSS类，这时可以使用织梦的 @me 和 function 来实现。
步骤 1：修改织梦核心文件（谨慎操作）
备份文件！备份文件！备份文件！
打开 /include/helpers/archive.helper.php 文件。
找到 GetMkHtml() 函数（大约在140行左右），在 if($type=='image') 的 return 语句之前，添加代码来处理我们自定义的属性。
修改前（示例）：
if($type=='image')
{
// ... 其他代码
return $ftype;
}
修改后（示例）：
if($type=='image')
{
// ... 其他代码
// --- 添加开始 ---
// 检查是否有 'responsive' 这个自定义属性
if (strpos($ftype, 'responsive') !== false) {
// 将 'responsive' 属性替换为 'class="responsive-img"'
$ftype = str_replace('responsive', 'class="responsive-img"', $ftype);
}
// --- 添加结束 ---
return $ftype;
}
步骤 2：在模板中调用
你可以在任何地方调用缩略图时,增加一个 responsive 属性。
{dede:field name='litpic' type='image' responsive=''/}
织梦在解析时,会自动将其转换为：
<img src="..." alt="..." class="responsive-img" />
步骤 3：添加CSS样式
在CSS文件中定义 .responsive-img 的样式即可。
.responsive-img {
width: 100%;
height: auto;
display: block;
}
优点：灵活，可以将样式逻辑与模板分离。 缺点：需要修改核心文件，升级织梦时可能会被覆盖，需要重新修改。
总结与推荐
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| CSS类 | 简单、安全、不修改核心文件，是最佳实践。 | 需要在模板和CSS中分别修改。 | 绝大多数情况，特别是内容页和列表页。 |
| 列表页专用 | 与方法一相同，专门针对列表页的循环标签。 | 同方法一。 | 所有列表页、首页的缩略图。 |
| 自定义属性 | 非常灵活，可以将样式逻辑封装在标签里。 | 需要修改核心文件，有升级风险。 | 需要对不同图片应用不同样式的复杂情况。 |
强烈推荐使用方法一或方法二，它们是最安全、最标准、最易于维护的解决方案，只需要在模板中稍微调整一下HTML结构，然后添加几行CSS代码，就能完美实现缩略图自适应的效果。
