一张图像的原始尺寸是:宽 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
- 宽 54px,高 49px
- 宽 30px,高 30p
- x宽 30px,高 30/(54/49)=27.22px
- 宽 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>
显示的尺寸依次是
- 宽 54px,高 49px
- 宽 54px,高 49px
- 宽 10px,高 10px
- 宽 30px,高 27.22px
- 宽 100px,高 100px