style(fe): 社区帖子图片改固定小缩略图(210rpx 正方形)
aspect-ratio 在微信渲染不生效导致竖图被撑长。改成 flex-wrap + 显式 210rpx 见方的缩略图,小而统一,点击 previewImage 放大。 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
+4
-4
@@ -389,11 +389,11 @@ page{scrollbar-width:none;-ms-overflow-style:none}
|
||||
.pu-s{font-size:var(--fs-sm);color:var(--muted)}
|
||||
.post-content{font-size:var(--fs-md);line-height:1.62;color:var(--text-2);margin-bottom:var(--sp-3)}
|
||||
|
||||
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);margin-bottom:var(--sp-3)}
|
||||
.photo-grid{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-3)}
|
||||
.photo-tile{
|
||||
/* 微信 image 默认 320x240,不显式给宽高会撑破网格。width:100% + min-width:0
|
||||
让它缩进 1fr 格子,aspect-ratio 保持正方形,overflow 裁掉溢出 */
|
||||
width:100%;min-width:0;aspect-ratio:1;overflow:hidden;
|
||||
/* 固定尺寸小缩略图,正方形。不用 aspect-ratio(微信渲染不生效,竖图会被撑长),
|
||||
显式 width/height 最稳;mode=aspectFill 裁成正方,点击再走 previewImage 放大 */
|
||||
width:210rpx;height:210rpx;flex:none;overflow:hidden;
|
||||
border-radius:var(--r-sm);background:var(--primary-soft);
|
||||
display:flex;align-items:center;justify-content:center;font-size:56rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user