background 属性 和 img标签 关于图片显示对比

img

盒子设置大小，图片都会完全填充满盒子区域，即便图片被拉伸压缩了

 <img src="./801.jpg" alt="" style="width: 200px;height: 250px;"/>

      

background 

关于 background-size 指定背景图片大小。

  background-size: length | percentage | cover | contain;

1  background-size: length   是宽高控制背景图片高度和宽度，然后盒子区域，以background-position 定位到图片的位置 显示，盒子不一定会被填充满，也不一定显示出图片全部内容

 background-size: 200px 250px;

2   background-size:  percentage 百分比的格式  相对于背景盒子大小的百分比，来设置图片的大小，图片的大小是盒子的百分比决定的，盒子区域以background-position 定位到图片的位置 显示

background-size: 100% 100%;

3  background-size: cover，图片大小纵横比会等比缩放  cover会填充满盒子大小，图片以最长边，等比缩放，

4  background-size: contain，图片大小纵横比会等比缩放，contain 会留白，图片大小会以盒子最短边，等比缩放，