前端通过background实现图片裁剪显示的方法

xioqua 发布于2019-08-21 17:06 / 3533人阅读

摘要：可以是真实图片路径或使用渐变创建的背景图像指定对象的背景图像位置。指定对象的背景图像显示的原点。

前端图片展示

在前端处理图片是非常常见的，而图片展示又存在一个最大的问题：适应，
可以看看这种情况：

固定空间展示图片

空间是 100px100px，图片是 6060

空间是空间是 100px100px，图片是 160px240px

空间是空间是 100px100px，图片是 240px160px

就图片展示而言，按宽高比进行缩放是最好的结果，宽高1：1的话，放到正方形空间内很好，可是如果是1：1.5的图片需要放到正方形页面容器里面呢？

目前需要前端处理的方式是使用background来操作，而不是img元素，需要以下几个属性的配合：

background-image ：指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”

background-position ：指定对象的背景图像位置。

background-size ：指定对象的背景图像的尺寸大小。

background-repeat ：指定对象的背景图像如何铺排填充。

background-attachment ：指定对象的背景图像是随对象内容滚动还是固定的。

background-origin ：指定对象的背景图像显示的原点。

background-clip ：指定对象的背景图像向外裁剪的区域。

background-color ：指定对象的背景颜色。

background的背景图片裁剪

为了使图片能够按照正常的宽高比显示，可以理解成以下几步操作：

固定宽高的容器元素，设置背景图片

把背景图片按照原始的宽高比伸缩，直到能够完全填充住容器元素的背景，容器的宽高比和背景图片的宽高比不一样时，会存在背景图片宽或者高大于容器的情况，；

把背景图片调整，使得多余的图片部分能够相对于容器对称展示，

截去显示在容器外的背景图片，只显示容器内的图片，大功告成；

代码可以如下书写：

background-image: url(test.img);
// background-size这个需要注意，大小需要看伸缩时是宽度会有富余还是高度会有富余，有富余者为auto，刚好填充满的就是100%
//比如宽高分别： 容器是100px*100px的，图片是240px*200px，那么在缩小填充容器时图片的高度会先触及到容器的边缘，也就是填满容器时，宽度有富余为auto，高度为100%；
background-size: auto 100%;  // 可以使用cover
background-position: center; //背景图片居中显示，让多余部分相对容器对此展示
background-repeat: no-repeat;
background-origin: border-box; //从border开始填充
background-clip: border-box;  //border外的多余背景图片不展示，截取掉，

可以使用background的缩写模式：

style="background:url(test.img) center/auto 100% no-repeat border-box border-box"

需要注意的是background-size的书写需要看情况而变
background-size这个需要注意，大小需要看伸缩时是宽度会有富余还是高度会有富余，有富余者为auto，刚好填充满的就是100%

比如宽高分别：
容器是100px100px的，图片是240px200px，那么在缩小填充容器时图片的高度会先触及到容器的边缘，也就是填满容器时，宽度有富余为auto，高度为100%；
background-size: auto 100%;
所以可以考虑使用cover这个值，background-size:cover;

参考：http://css.doyoe.com/properti...

GPU云服务器云服务器图片裁剪图片裁剪比例图片裁剪价格 PHP图片裁剪

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89139.html

前端通过background实现图片裁剪显示的方法

摘要：可以是真实图片路径或使用渐变创建的背景图像指定对象的背景图像位置。指定对象的背景图像显示的原点。前端图片展示在前端处理图片是非常常见的，而图片展示又存在一个最大的问题：适应，可以看看这种情况：固定空间展示图片空间是 100px100px，图片是 6060 空间是空间是 100px100px，图片是 160px240px 空间是空间是 100px100px，图片是 240px...

Seay 2019-08-30 13:46 评论0 收藏0
vue-avatar-tailor，vue头像裁剪组件

摘要：实现原理简单，纯技术处理图片，几乎不需要用到相关知识面向人群急于使用头像裁剪组件的同学。裁剪框初始宽高上传图片后，裁剪区将预设为最大裁剪范围。支持矩形裁剪目前九宫仅支持将图片裁剪为正方形，不能裁剪为矩形，该功能将在后续优化。项目简介本组件是vue下的头像裁剪组件，可以直接拷贝代码使用，无需安装依赖使用九宫格进行裁剪，自由选择裁剪区域。实时预览裁剪后效果。可以将裁剪好的图片，...

imccl 2019-08-23 12:13 评论0 收藏0
巧用css的border属性完成对图片编辑功能的性能优化

摘要：一需求场景最近闲来无事，提出了一个要求，研究相关代码并完成一个关于编辑图片功能的性能优化，该功能的主要界面展示如下通过了几分钟的短暂试用，发现就是一个简单的裁剪并保存用户选择并上传的图片作为用户头像的功能。一、需求场景：最近闲来无事，boss提出了一个要求，研究相关代码并完成一个关于编辑图片功能的性能优化，该功能的主要界面展示如下：通过了几分钟的短暂试用，发现就是一个简单的裁剪并保存用...

番茄西红柿 2019-04-23 13:10 评论0 收藏0
不可思议的CSS之clip-path

摘要：一个用来生成各种形状包括随意拖拉自定义并且可以直接生成代码的网站。兼容性目前兼容性较差，和直接不支持，考虑兼容性的同学可以暂时等等。透明区域表示被裁剪的区域基本图形定义一个矩形。语法说明可选，表示填充规则用来确定该多边形的内部。本文首发于我的博客曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。就像所有的颜色都是由三原色（RGB）...

walterrwu 2019-08-29 13:17 评论0 收藏0
浅谈 CSS Sprites 雪碧图应用

摘要：编写配置文件，以下是关键配置代码雪碧图合并输出到文件参数执行目录参数生成的和图片的文件名之所以推荐，是因为非常的灵活，看懂模块的可以根据你的项目情况编写对应的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言网站开发90%会用到小图标，多小图标调用显示是前端开发常见的问题；目前小图标显示常见有两种方式...

MkkHou 2019-08-30 13:12 评论0 收藏0