CSS也可以改变图片幅面尺寸

一般情况下，只有<img />标签中的图片，可以根据宽高设定来改变大小。

比如1024x768的图，我们设width="640",height="480"，他就会显示640x480。

往往为了避免不必要的数据传输，反而不提倡读取非实际大小的图片。

但我也没有想到，这世界上有些情况，恰恰需要用一个固定尺寸去读取实际上大很多很多的图片。

为的是，增加屏幕显示的DPI。

做Smart phone网站时，不用说Retina，一般高画质的屏幕都需要读取高清晰度的图片，否则就朦朦胧胧。

与彩色照片不同，一些颜色单一但是字体特殊的按钮，标题等，反而对图片质量要求很高。

在PS中如果拥有矢量编辑能力，将这些图片放大，做成高分辨率的图片，再让他自适应移动设备的屏幕尺寸，是获取高密度像素显示效果的不二法门。

我试过用PS的图像大小来提高DPI，但不论怎么提高，做成小尺寸图片后，仍然达不到效果，难道那个DPI形同虚设？

有些按钮可以用<a><img /></a>的方法制作，<img />会很方便的自适应。

但<input />要怎么办呢？

只有用CSS做背景。

如果CSS不能压缩一个幅面较大的图片到固定尺寸，只抠取局部显示，那这个问题就解决不了。

庆幸的是CSS3已经具备了这样的能力：

background:url(../images/uploadbtn.png) center no-repeat #ff1300; background-size:296px 55px; 

background-size:可以轻松把500x93乃至更大的图片，缩小至296x55。

这样不论是<img />还是<input />这样的标签，用大图来显示高像素密度的小图都成为可能。