object-fit 詳解

contain

被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，所以若是寬高比與框的寬高比不匹配，該對象將被添加「黑邊」。

cover

被替換的內容在保持其寬高比的同時填充元素的整個內容框。若是對象的寬高比與內容框不相匹配，該對象將被剪裁以適應內容框。

fill

被替換的內容正好填充元素的內容框。整個對象將徹底填充此框。若是對象的寬高比與內容框不相匹配，那麼該對象將被拉伸以適應內容框。

none

被替換的內容將保持其原有的尺寸。

scale-down

內容的尺寸與 none 或 contain 中的一個相同，取決於它們兩個之間誰獲得的對象尺寸會更小一些。