CSS图片剪裁与原比例压缩或放大

在前端网页制作的过程中，图片的处理往往比较头疼，当然不考虑你有很给力的美工后援的情况下。以下将对一些常见的CSS图片处理需求情况进行分析：

1、一张图片要放在固定宽高的内容块中，并填充满整个内容块（看起来整齐划一）

我们假设要把一张大小为1920*1200的图片放在400*400的内容块中，由于这时图片是长大于宽的，为了保证图片看起来不被压缩，可以固定宽度，从图片中间向左右两侧裁剪以保留图片的核心内容。如下图所示（左图为原图，右图则为实际显示在400*400内容内的图片内容）

HTML代码：

  
  
<div class="cover">
<img src="img/cover.jpg"/>
</div>
  
  

CSS代码：

  
  
img
{
height: 100%;
width: auto;
left: 50%;
position: relative;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
}
.cover
{
margin: 100px auto;
width: 400px;
height: 400px;
overflow: hidden;
border: 1px solid cornflowerblue;
position: relative;
}
  
  

若原始图片大小为683*984，即长小于宽，为了保证图片看起来不被压缩，可以固定长度，从图片中间向上下两端裁剪以保留图片的核心内容。如下图所示（左图为原图，右图则为实际显示在400*400内容内的图片内容）

CSS代码：

  
  
img
{
width: 100%;
height: auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
position: relative;
}
  
  

2、网站背景图片符合响应式布局，从台式机到手机，显示面积变小，从中间向四周截取部分作为背景显示。

CSS代码：

  
  
.jumbotron
{
padding: 0;
background-image: url(../img/cover.jpg);
background-position: center center;
}
  
  

重点是将图片设置为背景图片。

PS：以后遇到更多的CSS图片处理问题还会继续更新~小伙伴们敬请期待 :)