CSS 是怎样确定图像大小的

一张图像的原始尺寸是：宽 54px 高 49px
图像由指定，代码如下：
<img src="https://i-blog.csdnimg.cn/blog_migrate/4a5e8f3ba730784cf73a83f8ba327cac.png"> <img src="https://i-blog.csdnimg.cn/blog_migrate/4a5e8f3ba730784cf73a83f8ba327cac.png" width="30" height="30"> <img src="https://i-blog.csdnimg.cn/blog_migrate/4a5e8f3ba730784cf73a83f8ba327cac.png" width="30"> <img src="https://i-blog.csdnimg.cn/blog_migrate/4a5e8f3ba730784cf73a83f8ba327cac.png" height="30">

显示的尺寸依次是：
宽 54px，高 49px宽 30px，高 30px宽 30px，高 30/(54/49)=27.22px宽 30*(54/49)=33.06px，高 30px

1. 宽 54px，高 49px
2. 宽 30px，高 30p
3. x宽 30px，高 30/(54/49)=27.22px
4. 宽 30*(54/49)=33.06px，高 30px

图像由background-image指定，代码如下：

<style>
.img {
 display: inline-block;
 background-color: #eee;
 background-image: url('https://i-blog.csdnimg.cn/blog_migrate/4a5e8f3ba730784cf73a83f8ba327cac.png');
 background-repeat: no-repeat;
 background-size: auto; /*auto 是默认值*/
}
</style>
<span class="img" style="width: 100px; height: 100px;"></span>
<span class="img" style="width: 30px; height: 30px;"></span>
<span class="img" style="width: 30px; height: 30px; background-size: 10px 10px;"></span>
<span class="img" style="width: 30px; height: 30px; background-size: contain;"></span>
<span class="img" style="width: 100px; height: 100px; background-size: cover;"></span>

显示的尺寸依次是

1. 宽 54px，高 49px
2. 宽 54px，高 49px
3. 宽 10px，高 10px
4. 宽 30px，高 27.22px
5. 宽 100px，高 100px