點燈坊

失くすものさえない今が強くなるチャンスよ

使用 Object Fit 與 Object Position 統一圖片長寬

Sam Xiao's Avatar 2021-02-01

若圖片由 API 以 Base64 String 傳回且圖片大小不一,此時 Front-end 為了美觀必須在不改變原圖比例下有相同長寬,此時可使用 CSS 的 Object Fit 與 Object Position 完成。

Version

CSS 3

Original

fit000

原圖為 900x506

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

Both Half

fit001

widthheight 各改為 50%,原圖仍維持其比例。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 450px;
  height: 253px;
}
</style>

第 6 行

img {
  width: 450px;
  height: 253px;
}
  • widthheight 各改為 50%

User Size

fit002

使用自訂長寬,width 為 1/4,height 為 1/2,很明顯原圖比例已經跑掉。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
}

height 為一半,但 width 變成 1/4

Object Fit

Fill

fit006

原圖比例依然跑掉。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
  object-fit: fill;
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
  object-fit: fill;
}
  • object-fit: fillobject-fit 預設值就是 fill,會將原圖硬塞至指定 size,且喪失原圖比例

與任意指定 image size 且不使用 object-fit 結果相同

Contain

fit003

仍然將圖片塞進指定 size,但保留原圖比例。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
  object-fit: contain;
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
  object-fit: contain;
}
  • object-fit: containcontain 會維持原圖比例並視情況放大或縮小,最後塞進指定 size 內

Cover

fit004

原圖比例不變,只 crop 中間部分。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
  object-fit: cover;
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
  object-fit: cover;
}
  • object-fit: covercover 會維持原圖比例並縮圖,crop 進指定 size 內

None

fit005

只 crop 部分原圖至指定 size。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
  object-fit: none;
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
  object-fit: none;
}
  • object-fit: nonenone 不改變原圖比例也不縮圖,只 crop 原圖一部分塞進指定 size 內

Scale Down

fit007

看起來與 contain 結果相同。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
  object-fit: scale-down;
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
  object-fit: scale-down;
}
  • object-fit: scale-downscale-down 會選擇 containnone 中 file size 較小的呈現

Object Position

Default Value

fit009

看起來與 cover 結果相同。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
  object-fit: cover;
  object-position: 50% 50%;
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
  object-fit: cover;
  object-position: 50% 50%;
}
  • object-position: 50% 50%object-position 可傳入兩值指定以原圖 xy 作為 <img> 的起始點,若不指定其 default value 為 50%,也就是以原圖中心開始顯示,適合大部分使用情境

Right Top

fit008

cover 將重點放在右上角。

<template>
  <img src="https://picsum.photos/900/506/?random=10">
</template>

<style scoped>
img {
  width: 225px;
  height: 253px;
  object-fit: cover;
  object-position: 100% 0;
  /*object-position: right top;*/
}
</style>

第 6 行

img {
  width: 225px;
  height: 253px;
  object-fit: cover;
  object-position: 100% 0;
  /*object-position: right top;*/
}
  • object-position: 100% 0:若目的在顯示原圖右上角部分,可將 object-positoinx 指定為 100%y0,也可使用 right top

Conclusion

  • Object Fit 提供多種效果,以本例而言,cover 為最佳效果,可視需求決定
  • Object Fit 預設會取得圖片中間部分,可再使用 Object Position 做位置微調

Reference

Cropping Images in CSS With object-fit
CSS-Tricks, object-position