[Back To Basic] CSS object-fit

object-fit

指定圖片、影片，適應容器的模式。

• fill 

填滿容器，視情況放大或縮小(圖片、影片會被壓縮或拉長)

• contain

以容器的大小為主，保持長寬比，填入圖片、影片(圖片會變小)

• cover

保持長寬比，但是會裁減圖片

• none

無適應能力(不會放大縮小)，無視容器

• scale-down

none 和 contain 取二者中較小

source code