CSS background-size contain 與cover的區別

最近在重溫CSS，發現好多東西都忘了，比如background－size屬性中，contain與cover的區別。
菜鳥教程上是這麼說的：
 
有點難理解，通俗解釋就是：兩者均以保持圖像寬高比的形式縮放來適合背景容器的大小。
那麼兩者的區別呢？這就要根據圖像是否重複來分別討論了。
在no-repeat情況下，如果容器寬高比與圖片寬高比不同，
　　cover：圖片寬高比不變、鋪滿整個容器的寬高，而圖片多出的部分則會被截掉；
　　contain:圖片自身的寬高比不變，縮放至圖片自身能完全顯示出來，所以容器會有留白區域；
其實，從英文的意思來說：cover意味著“遮罩、遮蓋”-此處理解為“塞滿”較恰當，contain意為“包含”也就是：我圖片雖然縮放了，但是整個圖是被“包含”在你裏面的，你必須把我顯示完整、不能裁剪我一絲一毫。
在repeat情況下：cover:與上述相同；contain:容器內至少有一張完整的圖，容器留白區域則平鋪背景圖，鋪不下的再裁掉。