为diacuz评论区设置图片大小控制样式

飞流管家 · 发表于 2025-9-7 16:45:54

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

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

×

发现有的用户发了超宽图或者超长图，导致评论区长图会无限拉高，把评论区撑得老长；大图虽然宽度被压到容器宽，但高度等比放大，也会显得突兀。
所以针对这个问题进行了控制优化，代码如下

/* 统一包裹层 */
.comiis_img_one {
display: inline-block; /* 让多张图可以并排 */
max-width: 100%;
line-height: 0; /* 干掉幽灵空白 */
}
/* 对图片本身再做一层约束 */
.comiis_img_one img {
box-shadow: 0 0 5px rgba(0,0,0,.3);
max-width: 100%;
max-height: 360px; /* 关键：限定高度，长图会被压下来 */
width: auto;
height: auto;
vertical-align: middle;
object-fit: contain; /* 保证完整图，留白也不裁剪 */
background: #f6f6f6; /* 留白处用浅灰，避免空洞感 */
cursor: zoom-in; /* 暗示用户可点开看原图 */
transition: transform .15s ease;
}
/* 鼠标悬停轻微放大，增强交互 */
.comiis_img_one img:hover {
transform: scale(1.02);
}

复制代码

这个样式保证让图片统一视觉尺寸，不破坏比例，不撑爆版面，长图、大图、小图都能体面显示。
场景表现
小图按原尺寸居中，不拉伸
宽图宽度撑满容器，高度等比
长图高度被 `max-height` 卡住，宽度等比缩小，整体可见
超高清大图同上，不会爆版，鼠标悬停可放大查看
该效果代码基于克米手机版的.comiis_img_one img类名进行修改，其他模板也是一样的哈

	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] 为diacuz评论区设置图片大小控制样式

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

飞流广播+ 发布

神评新秀

关于我们

常用功能

服务引导