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

本文是《技术相关(共31篇)》目录的第 26 篇。阅读本文前,建议先阅读本文前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 | 2 条评论
  • 魏叔叔

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

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

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