这是一个非常常见的需求,主要有两种方法可以实现：
- CSS 方法（推荐，最简单）：通过 CSS 控制图片显示区域，让大图等比例缩放，小图则拉伸填充，这是最常用且对系统改动最小的方法。
- PHP 方法（高级，精确控制）：通过修改
arclist标签的底层代码，在图片输出时就直接生成指定尺寸的缩略图。
使用 CSS 控制缩略图大小（强烈推荐）
这种方法的核心思想是：让 arclist 标签正常输出原图，然后通过 CSS 来规定这个图片的显示尺寸。
步骤 1：修改列表页模板文件
找到你正在使用的列表页模板文件,通常是 templets/default/list_article.htm（路径可能根据你的模板而不同）。
在 arclist 标签中，确保 imgwidth 和 imgheight 这两个属性是不设置或者设置为 0 的，这样 DedeCMS 才会输出原图。
错误的写法（会生成固定尺寸的缩略图）：
{dede:arclist row='10' titlelen='30' imgwidth='200' imgheight='150'}
正确的写法（输出原图，交给 CSS 控制）：
{dede:arclist row='10' titlelen='30'}
<li>
<a href="[field:arcurl/]" title="[field:title/]">
<img src="[field:litpic/]" alt="[field:title/]">
</a>
<h3><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h3>
</li>
{/dede:arclist}
注意：[field:litpic/] 会调用文章的缩略图，如果没有缩略图，则会调用文章第一张图作为缩略图，这确保了总有图片可以显示。
步骤 2：在模板中添加 CSS 代码
在 list_article.htm 文件的 <head> 标签内，或者在模板的公共 CSS 文件（如 css/common.css）中，添加以下 CSS 样式。
假设你希望所有列表缩略图都显示为 宽度 200px，高度 150px。
/* 在 list_article.htm 的 <head> 部分添加 <style> 标签，或在公共 CSS 文件中添加 */
/* 方案1：强制拉伸（可能导致图片变形） */
.dede-list .list-img img {
width: 200px;
height: 150px;
display: block; /* 防止图片下方出现间隙 */
}
/* 方案2：等比例缩放，并裁剪（推荐，视觉效果好） */
.dede-list .list-img img {
width: 200px;
height: 150px;
object-fit: cover; /* 关键属性，让图片内容填充整个容器，超出部分会被裁剪 */
display: block;
}
CSS 属性解释：
width: 200px; height: 150px;：设定图片显示区域的固定尺寸。display: block;：将<img>元素设为块级元素，可以避免图片下方有时会出现的小间隙。object-fit: cover;：这个属性非常重要，它会让图片保持其原始宽高比，同时确保图片完全覆盖其容器（200x150），如果图片比例和容器不符，多出来的部分会被裁剪掉，这是目前最主流和美观的列表图显示方式。object-fit: contain;：另一种选择，它会保持图片比例，让整个图片完整显示在容器内，但可能会导致容器上下或两侧出现空白。
步骤 3：给 HTML 元素添加 Class
为了让 CSS 选择器能精准地定位到列表图片，你需要给包裹图片的 <li> 或 <div> 元素添加一个特定的 class。
修改 arclist 标签的 HTML 结构：
{dede:arclist row='10' titlelen='30'}
<li class="dede-list"> <!-- 添加 class -->
<a href="[field:arcurl/]" title="[field:title/]">
<div class="list-img"> <!-- 添加 class，专门用于包裹图片 -->
<img src="[field:litpic/]" alt="[field:title/]">
</div>
</a>
<h3><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h3>
</li>
{/dede:arclist}
CSS 中的 .dede-list .list-img img 就能正确找到这些图片并应用样式了。
修改 PHP 代码，直接生成缩略图
这种方法更底层,它直接修改 arclist 标签的行为，在调用图片时就生成你指定尺寸的缩略图。注意：修改核心文件前请务必备份！
步骤 1：找到并修改 arc.listview.class.php 文件
这个文件是 arclist 标签的核心处理类，通常位于 /include/arc.listview.class.php。
- 用代码编辑器打开这个文件。
- 按快捷键
Ctrl + F搜索GetImgs函数。 - 找到
GetImgs函数内部的这一行代码（通常在第 380 行左右，不同版本可能略有差异）：$this->Fields['imgurl'] = $GLOBALS['cfg_basehost'].$litpic;
- 在这行代码的下面，添加以下代码：
// 如果设置了imgwidth和imgheight，则调用缩略图函数生成新尺寸的图片 if ($this->ChannelUnit->ChannelInfos->imgwidth > 0 && $this->ChannelUnit->ChannelInfos->imgheight > 0) { $this->Fields['litpic'] = GetDDImg($litpic, $this->ChannelUnit->ChannelInfos->imgwidth, $this->ChannelUnit->ChannelInfos->imgheight); }代码解释：
if ($this->ChannelUnit->ChannelInfos->imgwidth > 0 ...)：判断系统模型中是否设置了默认的缩略图宽高。GetDDImg($litpic, $width, $height)：这是 DedeCMS 自带的函数，用于生成并返回指定尺寸的缩略图路径。
步骤 2：在列表模板中使用 imgwidth 和 imgheight
你可以在列表模板的 arclist 标签中直接使用 imgwidth 和 imgheight 属性了，这两个属性会覆盖系统模型的默认设置。
{dede:arclist row='10' titlelen='30' imgwidth='200' imgheight='150'}
<li>
<a href="[field:arcurl/]" title="[field:title/]">
<!-- [field:litpic/] 输出的是 200x150 的新缩略图 -->
<img src="[field:litpic/]" alt="[field:title/]">
</a>
<h3><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h3>
</li>
{/dede:arclist}
这种方法的特点：
- 优点：直接生成新尺寸的图片，可以减轻前端的渲染压力，并且可以配合 DedeCMS 的“水印”功能。
- 缺点：
- 性能开销：每次调用列表页，PHP 都需要为每张图片执行缩略图生成和裁剪操作，如果文章数量多，会显著增加服务器负担，导致页面加载变慢。
- 破坏原图：生成的缩略图是直接裁剪的，如果原图质量不高，放大后会模糊。
- 需要修改核心文件：升级 DedeCMS 时，这个修改可能会被覆盖。
总结与对比
| 特性 | 方法一 (CSS 控制) | 方法二 (PHP 生成) |
|---|---|---|
| 实现难度 | 简单，只需懂基础 HTML 和 CSS。 | 复杂，需要修改核心 PHP 文件。 |
| 性能影响 | 几乎无影响，所有缩放工作由浏览器完成。 | 有性能影响，服务器每次都要生成图片，增加 CPU/IO 负担。 |
| 灵活性 | 高，可以通过 CSS 的 object-fit 实现多种显示效果（覆盖、包含等）。 |
低，只能实现简单的裁剪，无法实现 object-fit: cover 的效果。 |
| 对系统影响 | 无，不修改任何文件，非常安全。 | 有，修改了核心文件，升级时需注意。 |
| 推荐场景 | 绝大多数情况，尤其是对性能有要求的网站。 | 需要批量生成带水印的缩略图，且服务器性能非常好的情况。 |
最终建议：
对于 99% 的使用场景，请优先使用方法一（CSS 控制），它更简单、更安全、性能更好，并且能实现更灵活的视觉效果，只有在你有非常特殊的需求（比如必须给列表图批量加水印）时，才考虑使用方法二。
