網站卡片圖片被拉長？用object-fit選擇裁切或完整顯示

模板卡片的圖片一換，人物變胖、Logo被裁掉，或每張圖的高度不同，通常不是檔案壞了，而是圖片比例和圖框沒有配好。先決定要「填滿圖框」還是「整張都看見」，再選object-fit。

同一張照片，三種結果

下面把同一張正方形地球照片放進寬圖框。fill會拉伸填滿；cover保留比例但裁掉超出部分；contain保留整張照片，空出的區域會露出背景。

作品照片通常用cover，Logo先考慮contain

風景或文章縮圖需要整齊填滿卡片時，cover通常合適，但要看人物臉部或主體的位置。Logo、商品全貌或需要完整閱讀的圖片，contain更容易保住內容；搭配中性的背景色，留白也能整齊。

.card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}
.card-image.logo {
  object-fit: contain;
  background: #f3f4f6;
}

aspect-ratio先定義圖框比例。這個例子沒有再固定height，避免和比例互相牽制；如果模板已寫死高度，先查現有規則。object-fit只改圖框內的顯示方式，不會壓縮原檔，也不會讓模糊的小圖變清楚。

調整裁切中心，再看手機

cover預設從中心裁切。如果主體靠上，可以試object-position: center 30%，再比較手機與桌機的實際卡片。不要對全站img一起套用：只選文章卡片的圖片class，保留正文截圖與Logo自己的顯示方式。

一張圖需要裁掉太多才放得進去時，改選更適合圖框比例的圖片，往往比繼續調CSS更省事。圖中的地球照片來源為NASA Apollo 17。

參考資料

資料核對於2026年10月3日；實際介面與文件可能更新。