限制PIX主题片刻Moment里超长图片完整显示
本文是《技术相关(共31篇)》目录的第 26 篇。阅读本文前,建议先阅读本文前3篇文章:
今天浏览首页,发现一个问题,前几天发了一个超长的图片,结果在首页默认全部显示,感觉非常的不美观。如下图黄色部分,这个仅仅显示了一半,还有一半因窗口问题未能一次性截图下来。
因此,想着把这种图片或者视频处理一下。高度我选择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部分输入以下代码:
最终显示效果如上图,大功告成!
您已阅读完《技术相关(共31篇)》目录的第 26 篇。请继续阅读本文后3篇文章:
魏叔叔
这个不错,有时候竖屏拍摄的图片或者视频分享出来的话,就会有这样超高显示的弊端,明天按你的方法修改起来
似水流年
@魏叔叔 欢迎!