web前端切图处理

div { 
  background: url(logo.png) no-repeat;
  background-size: cover;
  height: 200px;
  width: 400px;
}

"contain"值可以让你的背景图像缩放到最大宽度和高度，并且让整个背景图像保持在容器内。

2.image-set实现Retina屏幕下图片显示(CSS4中对background-image属性定义的一种新方法，image-set)

在普通分辨率下，将调用“qqlogo_1x.png”图片，而在Retina屏幕下（比如iPhone4s,iPhone5，New iPad等IOS设备）下会调用“qqlogo_2x.png”图像，从而避免了Logo在Retina屏幕下显示不清晰的问题。

#test {
  background-image: url(assets/no-image-set.png); 
  background-image: -webkit-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -moz-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -o-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  background-image: -ms-image-set(url(assets/test.png) 1x,url(assets/test-hires.png) 2x);
  width:200px;
  height:75px;
}

类似于不同的文本，图像也会显示成不同的：

1.  不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；
2.  支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；
3.  Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。

image-set真的好强大，很可惜的是，他仅支持background-image属性，而不能使用在“”标签中。