contain 是核心点是图片要全部展示完（通过缩放或者拉伸），假设图片(100，50)，那么如果容器size是（500，300），按照等比进行计算：

假设以宽度等比放大，该图片需要的容器为：500， 250（500/100 * 50)，在实际容器size内，图片可以展示完

假设以高度等比放大，该图片需要的容器为600（300/50 * 100），300，超出了实际的容器，图片无法展示

因此，在 contain 模式下，图片会以宽度进行等比放大，保障展示完自身，具体效果如下：

——————————————————————————————————————————————————————

cover 的核心则是要铺满容器，为了铺满容器，那么会选择能够包裹容器的（缩放、拉伸）比率，如上的示例，则是会选择以高度进行缩放，将图片扩大到：600，300。然后用来填充容器（以左上角为开始坐标），超出部分会被隐藏。效果如下：

cover
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
图片比例不变，但是要注意，超出容器的部分可能会裁掉。

contain
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
若不能完整填充容器，X轴或Y轴都有可能出现白边，图片不变形。

详见background-size值：cover、100%和contain的区别

你自己去实践再看区别解释会理解得更透