38
这个用户还没有留下简介。
回复讨论
0
登录后可参与回复讨论。
当前还没有回复,欢迎成为第一个参与讨论的人。
日常更新宝塔面板的过程,发现新论坛变成女仆论坛了,太好看了,用的Rhex开源项目构建的,然后点开画廊一看,发现自适应有些问题,图片不会自适应!!!
如果一张图片很高,旁边较短的卡片下面就会出现空白,不能自动往上填充。

部署了项目研究了一下,查看HTML结构
每个帖子卡片是 .post-gallery-card,图片在卡片内部,所以可以直接通过 CSS 改成瀑布流。
下面是操作步骤:找到对应的CSS文件修改:/www/wwwroot/rhex/src/app
把图片分区的普通 Grid:
globals.css.post-gallery-grid { display: grid; align-items: start; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); } .post-gallery-card { width: 100%; }

替换成下面这段:
globals.css/* 图片分区 Pinterest 瀑布流 */ .post-gallery-grid { display: block !important; column-width: 15.5rem; column-gap: 0.75rem; } .post-gallery-card { display: inline-block; width: 100%; margin: 0 0 0.75rem; break-inside: avoid; page-break-inside: avoid; vertical-align: top; } .post-gallery-card img { display: block; width: 100%; height: auto; object-fit: cover; } .post-gallery-card > a > .relative { min-height: 0 !important; } @media (max-width: 640px) { .post-gallery-grid { column-width: auto; column-count: 1; column-gap: 0.75rem; } } @media (min-width: 641px) and (max-width: 1023px) { .post-gallery-grid { column-count: 2; } } @media (min-width: 1024px) { .post-gallery-grid { column-width: 15.5rem; } }

重新构建重启项目后测试页面

