前端圖片預覽尺寸不一：三種佈局策略對比（裁剪/留白/拉伸）

上傳圖片預覽區固定寬高，用戶上傳長圖/寬圖導致變形或留白。三種主流處理策略：

1. 裁剪填充—— 參考 QQ/微信頭像

• 用戶上傳後進入裁剪頁，拖拽選區生成固定比例縮略圖
• 前端 Canvas 裁剪或後端 ImageMagick 處理
• 優點：列表頁極其整齊；缺點：增加用戶操作步驟

2. 等比縮放 + 居中留白—— 推薦通用方案

.preview {
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
    background: #f0f0f0; overflow: hidden;
}
.preview img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;  /* 關鍵：等比縮放居中 */
}

• 優點：無需用戶干預、保持原圖比例、上下留白對稱美觀

3. 拉伸填充—— 簡暴力

.preview img { width: 100%; height: 100%; object-fit: cover; }

• 缺點：圖片變形嚴重，僅適用於背景裝飾圖

選型建議