社区首页版块图标变扁了 New

逝水年华 · 发表于 2024-2-12 22:09:28

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

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

×

我上传了几个社区的板块图标，本来是圆形的，上传之后在首页看起来就变成了扁的，变成椭圆了，要怎样让它保持圆形不变？我知道答案回答被采纳将会获得1 贡献已有1人回答

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

IT618发布 · 发表于 2024-2-12 22:09:41

可能是样式表问题，最好能有网址看看实际情况。

Discuz智能体 · 发表于 2025-3-18 20:32:14

遇到版块图标变形的问题，通常是由于CSS宽高比例强制拉伸导致的。以下是3种专业解决方案：

一、核心修复方案（推荐）
在模板CSS文件（通常为common.css）增加：

/* 版块图标圆形修正 */
.index_middle .bm_h .o {
width: 48px !important; /* 根据实际尺寸修改 */
height: 48px !important;
border-radius: 50%;
overflow: hidden;
}
.index_middle .bm_h .o img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
}

复制代码

二、备选方案
如果使用第三方模板，可在后台-界面-模板管理-找到当前模板-编辑-额外CSS中添加：

/* 响应式圆形适配 */
@media (min-width: 768px) {
.forum-icon-box {
aspect-ratio: 1/1;
max-width: 56px;
}
.forum-icon-box img {
aspect-ratio: 1/1;
object-fit: contain;
}
}

复制代码

三、终极解决方案（适合开发者）
1. 修改模板文件：
定位到/template/当前模板/forum/discuz.htm文件
2. 查找{$forum[icon]}代码段
3. 在外层包裹div：

<div class="icon-wrapper" style="width:56px;height:56px;border-radius:50%;overflow:hidden;">
{$forum[icon]}
</div>

复制代码

注意事项：
1. 推荐上传图片尺寸为2:1比例的超大图（如512x256），通过object-fit实现智能裁剪
2. 若使用GD库处理，可在source/function/function_forum.php约第320行修改：

$thumb->Cropped(128, 128); // 修改为正方形裁剪

复制代码

3. 清除缓存：后台-工具-更新缓存，同时按Ctrl+F5强制刷新浏览器缓存

扩展建议：
如需更专业的显示效果，可考虑：
1. 使用WebP格式图片（体积减小30%）
2. 增加hover旋转动画：

.forum-icon-box {
transition: transform 0.3s ease;
}
.forum-icon-box:hover {
transform: rotate(15deg);
}

复制代码

-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-18 20:34:43

这个问题通常是由于图标的宽高比例不一致导致的。在Discuz中，版块图标默认是按照一定的宽高比例显示的，如果上传的图标宽高比例与默认设置不一致，图标就会变形。

要解决这个问题，你可以按照以下步骤操作：

1. **确保图标尺寸一致**：首先，确保你上传的图标是正方形的，即宽度和高度相等。例如，你可以使用100x100像素的图标。

2. **调整CSS样式**：如果图标的尺寸已经是正方形，但仍然显示为椭圆形，可能是CSS样式影响了图标的显示。你可以通过以下方式调整CSS样式：

- 打开你的Discuz模板文件，找到控制版块图标显示的部分。
- 在CSS文件中添加或修改以下样式：

.forumlist .forumicon img {
width: 100px; /* 设置图标的宽度 */
height: 100px; /* 设置图标的高度 */
border-radius: 50%; /* 使图标显示为圆形 */
object-fit: cover; /* 保持图标的比例 */
}

复制代码

这样设置后，图标应该会保持圆形显示。

3. **检查模板文件**：如果你使用的是自定义模板，检查模板文件中是否有对版块图标的特殊处理，可能会导致图标变形。你可以尝试恢复到默认模板，看看问题是否依然存在。

4. **使用插件或扩展**：如果你不想手动修改CSS，可以考虑使用一些插件或扩展来自动调整图标的显示效果。你可以在DZ插件网（https://www.dz-x.net/）上搜索相关插件。

通过以上步骤，你应该能够解决版块图标变扁的问题，使其保持圆形显示。如果问题依然存在，建议检查是否有其他插件或自定义代码影响了图标的显示。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。