核心原理
无论采用哪种方案,其核心思想都是一致的：
（图片来源网络，侵删）
- 使用响应式图片标签：在HTML中，我们使用
<picture>标签或者<img>标签配合srcset和sizes属性，这允许我们为不同屏幕尺寸提供不同尺寸的图片，从而在手机上加载小图，在电脑上加载大图,既保证了速度又保证了清晰度。 - 使用CSS控制样式：通过CSS的
max-width: 100%; height: auto;来确保图片的宽度不会超出其父容器的宽度，并且高度会等比例缩放,防止图片变形。 - 利用DedeCMS标签动态获取图片：使用DedeCMS的
{dede:field name='litpic'/}或{dede:field name='imglist'/}等标签来动态获取文章中的图片路径,而不是在模板中写死路径。
最简单、最推荐的方法（纯CSS + 标准img标签）
这是最常用且最简单的方法，适用于绝大多数场景，它不区分图片源,而是通过CSS统一控制所有图片的显示行为。
优点：简单、快速、对所有图片生效。 缺点：无法为不同屏幕提供不同分辨率的图片,加载的图片文件大小是固定的。
实现步骤：
修改CSS文件
在你的模板目录下的CSS文件（通常是 /templets/你的模板/style/ 目录下的 css 文件）中,添加以下CSS样式：
（图片来源网络，侵删）
/* 响应式图片样式 */
img {
max-width: 100%; /* 图片最大宽度为父容器的100% */
height: auto; /* 高度自动等比例缩放，防止变形 */
display: block; /* 避免图片下方出现多余空白 */
}
页模板中使用
页模板（通常是 /templets/你的模板/article_article.htm）中，确保你调用了这个CSS文件，在需要显示文章缩略图的地方,直接使用DedeCMS的标签即可。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:field.title/}</title>
<!-- 引入你的CSS文件 -->
<link rel="stylesheet" href="{dede:global.cfg_templeturl/}/style/style.css">
</head>
<body>
<h1>{dede:field.title/}</h1>
<!-- 文章缩略图 -->
{dede:field name='litpic'/}
<!-- 如果你需要显示文章中的第一张图，可以使用这个 -->
<!-- {dede:field name='imglist' function='GetOneImgUrl(@me, 1)'/} -->
<div class="article-content">
{dede:field.body/}
</div>
</body>
</html>
说明：
{dede:field name='litpic'/}会输出文章的缩略图路径，渲染后就是<img src="..." />。- 我们在CSS中已经为所有
img标签设置了自适应样式,所以这里的缩略图会自动适应屏幕宽度。 {dede:field.body/}是文章正文内容,里面包含的图片也会因为CSS的全局样式而自适应。
更高级的方法（使用 <picture> 和 srcset）
这种方法可以根据设备的屏幕尺寸和分辨率，智能选择最合适的图片,能显著提升移动端的加载速度。
（图片来源网络，侵删）
优点：性能优化最好，能提供最佳的用户体验。 缺点：实现稍复杂,需要为同一张图片准备不同尺寸的版本。
实现步骤：
准备不同尺寸的图片
假设你的文章缩略图原图是 800x600 像素,你需要准备几个不同尺寸的版本，
large.jpg(800x600) - 用于大屏电脑medium.jpg(400x300) - 用于平板small.jpg(200x150) - 用于手机
在模板中使用 <picture>
在文章列表页或内容页模板中，使用 {dede:field.litpic/} 获取原图路径,然后通过字符串处理函数来生成不同尺寸的图片路径。
示例代码（在文章列表页 list_article.htm 中）：
{dede:list pagesize='10'}
<li>
<!-- 使用 picture 标签 -->
<picture>
<!-- 默认情况，加载小图，适用于小屏幕 -->
<source media="(max-width: 600px)"
srcset="[field:litpic function='ResizeImage(@me, 200, 150, 1)'/]">
<!-- 中等屏幕 -->
<source media="(max-width: 1024px)"
srcset="[field:litpic function='ResizeImage(@me, 400, 300, 1)'/]">
<!-- 大屏幕，加载原图 -->
<img src="[field:litpyic function='ResizeImage(@me, 800, 600, 1)'/]"
alt="[field:title function='html2text(@me)'/]"
loading="lazy">
</picture>
<h2><a href="[field:arcurl/]">[field:title/]</a></h2>
<p>[field:description function='cn_substr(@me, 100)'/]...</p>
</li>
{/dede:list}
代码解释：
<picture>标签是图片的容器。<source>标签定义了不同条件下（由media属性决定）应加载的图片（由srcset属性指定）。media="(max-width: 600px)"：表示当视口宽度小于等于600像素时（手机），使用srcset中的图片。srcset="[field:litpic function='ResizeImage(@me, 200, 150, 1)'/]"：这是DedeCMS的核心部分。ResizeImage()是DedeCMS内置的图片裁剪函数。@me代表当前字段的值，即{dede:field.litpic/}的原始路径。200, 150是你希望生成的新图片的宽度和高度。1表示等比例缩放,不裁剪。
<img>标签是<picture>的后备方案，如果浏览器不支持<picture>标签，或者所有<source>标签的条件都不满足，则会加载这个<img>,我们这里让它加载大图作为后备。loading="lazy"是一个性能优化属性，表示“懒加载”，当图片滚动到可视区域时再加载,可以加快页面初始加载速度。
针对文章正文内容的图片自适应
我们只需要让文章正文 {dede:field.body/} 中的图片自适应,而缩略图可能有特殊样式。
实现步骤：
修改CSS
在CSS文件中，不使用全局的 img 选择器,而是给正文图片一个特定的类名或父容器。
/* 只针对文章正文里的图片进行自适应 */
.article-content img {
max-width: 100%;
height: auto;
display: block;
margin: 10px 0; /* 可选：增加一些间距 */
}
图片添加一个响应式容器，防止图片撑破布局 */
.article-content {
word-wrap: break-word; /* 兼容性较好的换行 */
overflow-wrap: break-word; /* 现代浏览器换行 */
}
修改模板
被一个带有 article-content 类的 div 包裹起来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:field.title/}</title>
<link rel="stylesheet" href="{dede:global.cfg_templeturl/}/style/style.css">
</head>
<body>
<h1>{dede:field.title/}</h1>
<!-- 文章缩略图，可以单独设置样式，不受上面CSS影响 -->
<div class="thumbnail">
{dede:field name='litpic'/}
</div>
<!-- 正文内容，用 div 包裹并加上 class -->
<div class="article-content">
{dede:field.body/}
</div>
</body>
</html>
总结与建议
| 方案 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 方案一 (纯CSS) | 绝大多数情况，新手首选 | 极其简单，对所有图片生效 | 无法优化图片加载性能 |
方案二 (<picture>) |
对性能有高要求的网站 | 性能最优，体验最好 | 实现复杂，需要准备多尺寸图片 |
| 方案三 (针对正文) | 需要对缩略图和正文图片做不同样式处理时 | 灵活，控制精确 | 需要额外修改HTML结构 |
给你的建议：
- 对于绝大多数网站，直接使用【方案一】，它简单有效，能解决90%的自适应问题。
- 如果你的网站图片非常多，且对加载速度有严格要求，可以考虑投入精力实现【方案二】,这会让你的移动端用户体验提升一个档次。
- 如果你发现缩略图和正文图片的样式需求不同，请使用【方案三】进行精细化控制。
别忘了在模板的 <head> 部分添加 viewport meta标签,这是所有响应式设计的基础：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
