css3 background显示图片的一部分

Question

前端新人，最近跟着网上一个入门项目学习。遇到如下问题：

该元素是轮播图左边的按钮图片，

原图是

为什么原图大小为50px，设置为21px后并没有压缩原图而是现实的左边部分呢。。

Answer 1

background-size:contain 会以最长的边为基准，等比缩放，图片不会被裁减。background-size:cover 会以最短的边为基准，等比缩放，图片会被裁减。background-size:100% 100% 会填充整个div。图片不会被裁减，但是会被拉伸。

Answer 2

图片是作为背景图片显示的。默认情况下元素的 background-size 属性值为 auto，也就是保持背景图片的原始宽度和高度。要想实现 “完全压缩原图” ，需要重新设置 background-size 值为 “100%,100%”，这样背景图片的宽高就等于元素的宽高。这是 background-size 不同取值的规则，具体见 w3c