css图片铺满浏览器窗口且不变形

今天项目中提到一个需求，需要把背景图片铺满浏览器全屏，且图片不变形。
也就是说显示的宽高是不确定的，我第一反应就是background-size: 100% 100%;但是这样做有一个弊端。

下面结合代码图具体讨论一下：
首先，设计一个背景颜色为绿色，背景图片为大象的盒子（这里之所以设置背景颜色，是为了突出背景图片）。然后分别叠加background-size属性值。

<style>
    .box{
   
        height: 250px;
        width: 400px;
        border: 1px solid red;
        background: palegreen