今天分享一个非常实用的技术，通过该方法你可以轻松的将它使用到文章的缩量图方面，而不需要特意的用photoshop等软件对图片进行重新的裁切。
采用该方法有一个好处就是它自身的灵活性，你可以自定义图片裁切的位置，而你要做的就是需根据需要简单的修改一下HTML代码就足够了。
实现的效果
焦点裁切技术是由一个名叫Adam Bradley的作者所创建的，响应试图片概念的大致意思就是图片自身能够跟随浏览器窗口范围的变化自由调整自身的大小，但是该方法不同于自适应图片的地 方，就是图片本身并不会根据浏览器窗口的变化来调整自身的大小，而是会对图片进行适当的裁切。
它是如何工作的?
你可以在心理自由的选择想要裁切的位置，在使用该技巧之前先来理解一下这个被称为焦点裁切技术的原理。
不用担心因为这种技术是非常独特的而且非常容易使用，首先当你采用焦点裁切技术的css框架的前提下，在网页中插入一张图片时图片就会被自动的分割成12x12的网格区域.
如下图所示：
现在我们已经了解了图片切割的原理，首先我们应该确保被裁切图片的中心位置也就是图片的主要内容区域，例如该图片的主要区域是男士的脸部以及身体的部位。
根据图片的显示在这种情况下男士脸部作为中心区域距离最有侧的距离大致为三个网格区域，距离顶部同样是三个网格区域的距离。
首先添加HTML代码结构
<div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div>
采用焦点裁切技术的图片最外围包裹着名为focal-point的class元素，接着再用一个未命名的div层包裹。
添加网格距离
根据自身的测量将网格的距离添加到类名为focal-point中。
<div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </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焦点图片裁切技术
相关推荐
在本示例中，我们探讨的是一个利用jQuery和CSS技术实现的图片裁切功能。这个功能在现代网页设计中非常常见，特别是在用户需要上传个性化头像或者预览图片效果的应用场景下。接下来，我们将深入讨论如何利用这两种...
在现代网页设计中，利用CSS3和HTML5的特性可以实现许多创新的视觉效果，其中图片按照固定比例尺寸裁切的特效就是一个常见的需求。这种特效通常用于图片展示、相册或者响应式布局中，以确保图片在不同屏幕尺寸下保持...
"css动态焦点图"这个主题涉及到的是如何利用HTML和CSS技术，甚至可能结合JavaScript，来创建一个具有动画效果且能够自动或手动切换焦点的图片或内容展示区域。下面我们将深入探讨这一技术。 1. **HTML结构**： - ...
【CSS HTML焦点图】是一种网页设计中的重要元素，它用于展示一组图片或内容，并通过滑动、淡入淡出等动态效果实现焦点切换，提升用户体验。在这个项目中，我们将使用CSS3和HTML5来实现这样的功能。下面将详细介绍...
在前端开发中，创建一个图片定时循环滚动焦点图是一种常见的需求，主要用于展示多个图片并吸引用户的注意力。这个项目就是利用纯CSS技术实现这样的功能，并且确保兼容主流浏览器，包括Chrome、Firefox、Safari、Edge...
正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现，比如说CSS伪元素，他可以帮助我们模拟出这些CSS无法...
CSS技术是用于控制网页样式的语言，主要用于设置网页的布局、颜色、字体、背景图片等样式。CSS技术分为三种类型：内联样式、内部样式和外部样式。内联样式是将样式直接写在HTML标签中，内部样式是将样式写在HTML文档...
CSS做的图片定时循环滚动焦点手风琴式下拉菜单11111111
本资源“jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码.rar”是一个实用的示例，它展示了如何利用jQuery和CSS技术实现一个五屏焦点图的动态效果，包括图片的淡入淡出以及通过圆形按钮进行图片切换。...
"CSS焦点图箭头导航动画效果.zip" 提供了一种创新的方法，让网页中的焦点图（也称为幻灯片或轮播图）更加吸引用户注意力。这个压缩包包含14种不同的CSS箭头导航动画效果，每一种都能为用户带来新鲜感，使浏览过程更...
总的来说，ZoomImageDemo是一个很好的学习资源，可以帮助我们掌握图片在线裁切的相关技术，包括文件上传、canvas操作、坐标计算以及前后端通信等。无论你是初学者还是有经验的开发者，都可以从中受益，提升自己的...
"js+css3图片3D旋转轮播特效"就是一个结合JavaScript与CSS3技术，为网站焦点图提供立体旋转切换效果的实例。这种特效可以使得网站的图像展示更加生动，增加用户的交互体验。 首先，我们来了解一下CSS3。CSS3是层叠...
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
今天我们要给大家分享的是一款jQuery/CSS3 3D旋转图片切换焦点图插件，主要有两种模式，一种是页面上始终只有一张图片，通过3D反转切换下一张图片；另外一种是多张图片进行3D立体排列，通过图片立体平移实现多图切换...
jQuery允许我们轻松地获取和操作DOM元素，而VMiddleImg-jQuery插件正是利用了这一点，通过计算图片和容器的宽高比例，动态调整图片的CSS属性，如`width`、`height`和`transform`，从而达到居中裁切的效果。...
HTML css图片放大效果，鼠标放在图片上后图片放大，离开后缩小
【标题】"7图轮显带标题的焦点图片广告代码(js+css)" 是一种常见的网页设计技术，用于在网站上创建吸引用户注意力的动态广告展示。这种技术利用JavaScript和CSS来实现图片的自动轮播，并且可以显示标题，增强用户...
"纯CSS图片无缝走马灯效果"是一种常见且实用的技术，它利用CSS3的动画（Animation）和过渡（Transition）特性，实现图片的自动轮播，同时保持视觉上的连续性，即“无缝”效果。本文将深入探讨如何通过CSS实现这一...
这是一款看上去非常简易的图片播放焦点图插件，插件利用了CSS3相关属性，实现图片的翻转动画。之前我们也刚分享过一款基于CSS3的图片悬停翻转动画，利用的是相同的原理，不过这是在翻转的过程中切换成另外一张图片。
css图片外边框效果实现 css图片外边框效果实现