限制PIX主题片刻Moment里超长图片完整显示

本文是《技术相关(共37篇)》目录的第 25 篇。阅读本文前,建议先阅读本文前3篇文章:

阅读本目录下更多其它文章

今天浏览首页,发现一个问题,前几天发了一个超长的图片,结果在首页默认全部显示,感觉非常的不美观。如下图黄色部分,这个仅仅显示了一半,还有一半因窗口问题未能一次性截图下来。

限制PIX主题片刻Moment里超长图片完整显示-似水流年

因此,想着把这种图片或者视频处理一下。高度我选择480PX作为分界点,超过480PX则高度最多显示480PX,宽度自适应。高度小于或等于480PX,则默认完整显示。

片刻MOMENT里可以发图片和视频,图片就一种来源,上传到媒体库,视频有两种来源,上传到媒体库或者引用哔哩哔哩。经检查,图片的CLASS是.fancybox.mo_img,视频的CLASS都是.pix_local_player。

进入后台,PIX主题设置---扩展设置。

自定义CSS部分输入以下代码:

/* 前台图片或者视频高度超高时,只显示480px,其他高度请在下方调整 */
.fancybox.mo_img,
.pix_local_player,
  iframe[src*="bilibili.com"] {
  max-height: 480px;
  height: auto;
}

自定义Javascript部分输入以下代码:

温馨提示: 此处为隐藏内容,需要评论本文后才能查看.
评论后请刷新一次页面,但注意不要清除缓存,否则还需要再次评论!

限制PIX主题片刻Moment里超长图片完整显示-似水流年

最终显示效果如上图,大功告成!

Comments | 4 条评论
  • Evan

    Google Chrome 129 Google Chrome 129 Mac OS X 10.15 Mac OS X 10.15 1中国–北京–北京 联通/网宿科技联通CDN节点 ip address 123.125.*.*

    挺好,还真没有传过长的图片哈哈

    • 似水流年

      IBrowse r IBrowse r Android 12 Android 12 1中国 中国移动 ip address 2409:894a:5f30:3d6:*:*

      我也就传过这一个。😆

  • 魏叔叔

    Google Chrome 123 Google Chrome 123 Windows Server 2003 Windows Server 2003 1日本–东京都 韩国cdnetworks公司CDN节点 ip address 115.127.*.*

    这个不错,有时候竖屏拍摄的图片或者视频分享出来的话,就会有这样超高显示的弊端,明天按你的方法修改起来

    • 似水流年

      IBrowse r IBrowse r Android 12 Android 12 1中国–河南–漯河 联通 ip address 42.238.*.*

      欢迎!

消息盒子
# 您需要首次评论以获取消息 #
# 您需要首次评论以获取消息 #

只显示最新10条未读和已读信息