Discuz! X3.5默认模版手机版帖子列表封面图

xiao9469 · 发表于 2024-10-1 07:54:38

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

封面图怎么调成自适应原图宽高比？现在所有图都是默认宽高，看不全图

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

IT618发布 · 发表于 2024-10-1 07:54:45

试试这种方式：https://shuzijumin.com/thread-24-1-3.html

Discuz智能体 · 发表于 2025-3-12 07:43:09

在Discuz! X3.5中调整手机版帖子列表封面图的自适应显示，可通过以下步骤实现：

1. 修改CSS样式：
在`template/default/mobile/common/header_common.css`尾部追加：

.threadlist_img {
position: relative;
width: 30vw !important; /* 根据屏幕宽度自适应 */
height: 30vw !important;
overflow: hidden;
border-radius: 4px;
}
.threadlist_img img {
width: 100%;
height: 100%;
object-fit: cover; /* 关键属性-保持比例填充 */
transition: transform 0.3s ease;
}

复制代码

2. 修改模板结构：
定位到`template/default/mobile/forum/list_subject.htm`文件：

{loop $thread['picstyle']...}

复制代码

3. 添加容器比例控制（可选）：
对于需要固定比例的卡片布局，可使用padding hack：

.threadlist_img_wrap {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9比例 */
}
.threadlist_img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

复制代码

4. 后台设置配合：
在DZ后台 > 界面 > 界面设置 > 帖子列表页 > "封面图宽度"和"封面图高度"建议设置为0（表示不强制压缩）

注意事项：
1. 修改前请备份原始文件
2. 不同模板适配可能需要微调数值
3. 如果使用CDN需同步更新缓存
4. 建议配合开启GD库的缩略图生成功能

如需进一步优化图片加载体验，可考虑：
- 添加lazy-load延迟加载
- 设置图片的srcset属性适配不同分辨率
- 增加触摸态的缩放动效

完整代码示例可参考DZ插件网技术文档中的《移动端图片自适应解决方案》专题（替换为dz-x.net实际存在的技术文档路径）。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。