css焦点图片裁切技术

今天分享一个非常实用的技术，通过该方法你可以轻松的将它使用到文章的缩量图方面，而不需要特意的用photoshop等软件对图片进行重新的裁切。

采用该方法有一个好处就是它自身的灵活性，你可以自定义图片裁切的位置，而你要做的就是需根据需要简单的修改一下HTML代码就足够了。

实现的效果



焦点裁切技术是由一个名叫Adam Bradley的作者所创建的，响应试图片概念的大致意思就是图片自身能够跟随浏览器窗口范围的变化自由调整自身的大小，但是该方法不同于自适应图片的地方，就是图片本身并不会根据浏览器窗口的变化来调整自身的大小，而是会对图片进行适当的裁切。



它是如何工作的?

你可以在心理自由的选择想要裁切的位置，在使用该技巧之前先来理解一下这个被称为焦点裁切技术的原理。

不用担心因为这种技术是非常独特的而且非常容易使用，首先当你采用焦点裁切技术的css框架的前提下，在网页中插入一张图片时图片就会被自动的分割成12x12的网格区域，如下图所示：



现在我们已经了解了图片切割的原理，首先我们应该确保被裁切图片的中心位置也就是图片的主要内容区域，例如该图片的主要区域是男士的脸部以及身体的部位。

根据图片的显示在这种情况下男士脸部作为中心区域距离最有侧的距离大致为三个网格区域，距离顶部同样是三个网格区域的距离。



首先添加HTML代码结构

1.<div class="focal-point">
2.  <div><img src="guy.jpg" alt="guy"></div>
3.</div>

采用焦点裁切技术的图片最外围包裹着名为focal-point的class元素，接着再用一个未命名的div层包裹。

添加网格距离

根据自身的测量将网格的距离添加到类名为focal-point中

1.<div class="focal-point right-3 up-3">
2.  <div><img src="guy.jpg" alt=""></div>
3.</div>

添加 Adam Bradley 所创建的css样式框架

.focal-point {
width: 100%;
height: auto;
overflow: hidden;
}

.focal-point img {
width: 100%;
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
}

.focal-point div {
position: relative;
max-width: none;
height: auto;
}

@media all and (max-width: 768px) {

/* 4x3 Landscape Shape (Default) */
.focal-point div {
margin: -3em -4em;
}

/* Landscape down (Total 6em) */
.down-1 div {
margin-top:    -3.5em;
margin-bottom: -2.5em;
}
.down-2 div {
margin-top:    -4em;
margin-bottom: -2em;
}
.down-3 div {
margin-top:    -4.5em;
margin-bottom: -1.5em;
}
.down-4 div {
margin-top:    -5em;
margin-bottom: -1em;
}
.down-5 div {
margin-top:    -5.5em;
margin-bottom: -0.5em;
}
.down-6 div {
margin-top:    -6em;
margin-bottom: 0;
}

/* Landscape up (Total 6em) */
.up-1 div {
margin-top:    -2.5em;
margin-bottom: -3.5em;
}
.up-2 div {
margin-top:    -2em;
margin-bottom: -4em;
}
.up-3 div {
margin-top:    -1.5em;
margin-bottom: -4.5em;
}
.up-4 div {
margin-top:    -1em;
margin-bottom: -5em;
}
.up-5 div {
margin-top:    -0.5em;
margin-bottom: -5.5em;
}
.up-6 div {
margin-top:    0;
margin-bottom: -6em;
}

/* Landscape right (Total 8em) */
.rightright-1 div {
margin-left:  -4.66em;
margin-right: -3.34em;
}
.rightright-2 div {
margin-left:  -5.33em;
margin-right: -2.67em;
}
.rightright-3 div {
margin-left:  -6em;
margin-right: -2em;
}
.rightright-4 div {
margin-left:  -6.66em;
margin-right: -1.34em;
}
.rightright-5 div {
margin-left:  -7.33em;
margin-right: -0.67em;
}
.rightright-6 div {
margin-left:  -8em;
margin-right: 0;
}

/* Landscape left (Total 8em) */
.left-1 div {
margin-left:  -3.34em;
margin-right: -4.66em;
}
.left-2 div {
margin-left:  -2.67em;
margin-right: -5.33em;
}
.left-3 div {
margin-left:  -2em;
margin-right: -6em;
}
.left-4 div {
margin-left:  -1.34em;
margin-right: -6.66em;
}
.left-5 div {
margin-left:  -0.67em;
margin-right: -7.33em;
}
.left-6 div {
margin-left:  0;
margin-right: -8em;
}

/* 3x4 Portrait Shape */
.focal-point.portrait div {
margin: -4em -3em;
}

/* Portrait down (Total 8em) */
.portrait.down-1 div {
margin-top:    -4.66em;
margin-bottom: -3.34em;
}
.portrait.down-2 div {
margin-top:    -5.33em;
margin-bottom: -2.67em;
}
.portrait.down-3 div {
margin-top:    -6em;
margin-bottom: -2em;
}
.portrait.down-4 div {
margin-top:    -6.66em;
margin-bottom: -1.34em;
}
.portrait.down-5 div {
margin-top:    -7.33em;
margin-bottom: -0.67em;
}
.portrait.down-6 div {
margin-top:    -8em;
margin-bottom: 0;
}

/* Portrait right (Total 6em) */
.portrait.rightright-1 div {
margin-left:  -3.5em;
margin-right: -2.5em;
}
.portrait.rightright-2 div {
margin-left:  -4em;
margin-right: -2em;
}
.portrait.rightright-3 div {
margin-left:  -4.5em;
margin-right: -1.5em;
}
.portrait.rightright-4 div {
margin-left:  -5em;
margin-right: -1em;
}
.portrait.rightright-5 div {
margin-left:  -5.5em;
margin-right: -0.5em;
}
.portrait.rightright-6 div {
margin-left:  -6em;
margin-right: 0;
}

/* Portrait up (Total 8em) */
.portrait.up-1 div {
margin-top:    -3.34em;
margin-bottom: -4.66em;
}
.portrait.up-2 div {
margin-top:    -2.67em;
margin-bottom: -5.33em;
}
.portrait.up-3 div {
margin-top:    -2em;
margin-bottom: -6em;
}
.portrait.up-4 div {
margin-top:    -1.34em;
margin-bottom: -6.66em;
}
.portrait.up-5 div {
margin-top:    -0.67em;
margin-bottom: -7.33em;
}
.portrait.up-6 div {
margin-top:    0;
margin-bottom: -8em;
}

/* Portrait left (Total 6em) */
.portrait.left-1 div {
margin-left:  -2.5em;
margin-right: -3.5em;
}
.portrait.left-2 div {
margin-left:  -2em;
margin-right: -4em;
}
.portrait.left-3 div {
margin-left:  -1.5em;
margin-right: -4.5em;
}
.portrait.left-4 div {
margin-left:  -1em;
margin-right: -5em;
}
.portrait.left-5 div {
margin-left:  -0.5em;
margin-right: -5.5em;
}
.portrait.left-6 div {
margin-left:  0;
margin-right: -6em;
}

}

最后我们来看一下图片效果，起初该图片载入的效果跟正常插入的没有什么区别，但是当你改变浏览器窗口的时候（窗口宽度小于768px）原始图片将会被裁切掉，只保留你想要显示的部分。



原始效果



裁切效果



总结：该技术的实现采用的时纯css实现不需要加载js脚本，使用也非常方便简洁，但是所谓的焦点裁切其实现的就是类似图片裁切的效果，而不是真正意义上的将图片进行裁切，因此你就可以灵活的根据需要选择图片裁切显示的部位。

实例演示：css焦点图片裁切技术

demo下载