✨️靓标库🧚‍♂️名人堂⚔️攻守道🎲骰子🥊猜拳🏧黑市🏧银行💹抽奖💝捐助
✨活动💥客户端🎫卡密📜淘帖🧩导读📢推广👛帮助💰️钱包💖关注
  • 首页
  • 社区
  • 资源
  • 拍卖
  • 排行Ranklist
  • 家园Space
  • 圈子
  • 任务
  • 商城
  • 文库
  • 需求
    • 立即注册
    飞流论坛»社区 › 网络中心 › 站长之家 › 为diacuz评论区设置图片大小控制样式
    返回列表 发布新帖
    查看: 159|回复: 0

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

    [复制链接]
    SunJu_FaceMall
    社区贡献

    30

    主题

    70

    回帖

    2908

    积分

    等级头衔
    Icon组别 : 管理员
    Icon等级 :

    积分成就
       钻石 : 37 颗
       贡献 : 8577 点
       金币 : 9 枚
    Icon在线时间 : 240 小时
    Icon注册时间 : 2025-5-6
    Icon最后登录 : 2025-10-20

    荣誉勋章

    神评新秀

    风云·优秀版主
    飞流管家名人堂成员

    10000

    vip ChuanQi发表于 2025-9-7 16:45:54 来自手机端 | 查看全部 |阅读模式 北京

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

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

    ×
    发现有的用户发了超宽图或者超长图，导致评论区长图会无限拉高，把评论区撑得老长；大图虽然宽度被压到容器宽，但高度等比放大，也会显得突兀。
    所以针对这个问题进行了控制优化，代码如下
    1. /* 统一包裹层 */
    2. .comiis_img_one {
    3.     display: inline-block;          /* 让多张图可以并排 */
    4.     max-width: 100%;
    5.     line-height: 0;                 /* 干掉幽灵空白 */
    6. }

    8. /* 对图片本身再做一层约束 */
    9. .comiis_img_one img {
    10.     box-shadow: 0 0 5px rgba(0,0,0,.3);
    11.     max-width: 100%;
    12.     max-height: 360px;              /* 关键：限定高度，长图会被压下来 */
    13.     width: auto;
    14.     height: auto;
    15.     vertical-align: middle;
    16.     object-fit: contain;            /* 保证完整图，留白也不裁剪 */
    17.     background: #f6f6f6;            /* 留白处用浅灰，避免空洞感 */
    18.     cursor: zoom-in;                /* 暗示用户可点开看原图 */
    19.     transition: transform .15s ease;
    20. }

    22. /* 鼠标悬停轻微放大，增强交互 */
    23. .comiis_img_one img:hover {
    24.     transform: scale(1.02);
    25. }
    复制代码

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

    使用道具 举报

    返回列表 发布新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    飞流广播+ 发布

    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		10-30 17:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		10-09 09:07
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-24 09:00
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-11 11:40
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		09-02 09:17
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-27 08:56
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-20 15:12
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		08-03 10:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		06-30 08:57
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		06-18 09:14
    系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-11 09:40
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-10 09:31
    系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 13:44
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 09:22
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		04-09 08:52
    系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-08 09:24
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		04-07 09:02
    系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#
    		02-27 09:35
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-26 09:06
    系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#
    		02-25 08:49
    站内通告

    提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

    1.丰富功能系统，扩展社区特色玩法，打造最好的互联网聚集圈子。

    2.准确信息真实交易，安全快捷又方便，让虚拟交易面对面。

    3. 天上不会掉馅饼，话术骗术迷人心，切勿脱离平台线下交易，被骗与平台无关！

    4. 欺诈骗钱，违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理！

    官方Q群：123129钉推群：BAYR2383 站长QQ：3220000000

    关于我们

    纪律公约 官联方式 迭代更新 招贤纳士

    常用功能

    活动中心 竞价十榜 推广奖励 下载多端

    服务引导

    帮助中心 麦粉会员 认证中心 点靓UID
    投诉/建议/商务合作联系

    fl@fllt.cn

    严禁私下交易，被骗与本站无关。
    违反交易细则，取证立查严惩。
    • 钉钉新帖推送群
    • 官方交流QQ群
    • 站长唯一微信号

    👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

    GMT+8, 2025-11-13 00:53 , Processed in 0.068086 second(s), 54 queries, MemCached On , Gzip On.

    Based on XJ-TX X3.5 Licensed

    飞流论坛 HanAnalytics icp Astro vhAstro-Theme

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表