css图片尺寸设计,xximg: 一款用于前端图片调整的jquery插件 在前端实践中，常常会出会图片的尺寸和设计尺寸不匹配的情况，导致页面差位，或是图片很难看。传统的解决方案要么损失的图片的展示效果...

xximg

项目介绍

一款用于前端图片调整的jquery插件

在前端实践中，常常会出会图片的尺寸和设计尺寸不匹配的情况，导致页面差位，或是图片很难看。传统的解决方案要么损失的图片的展示效果，要么使用背景

图片的方式用css3定位。

这里提的供了另一个选择，希望可以帮你解决一些问题

设计思路

插件基于jquery开发，实现思路为：

获取目标图片的尺寸，创建等大小的canvas,将原图 伸缩 或 裁切 到目标大小，并重新定位，然后将canvas重新绘到img中。

纯前端js操作，无需后台支持

原图的src会被base64格式的数据覆盖

原图的src保留在 original_src 属性中

安装教程

引入js文件

给需求调整的图片加一个选择器(非必需),如 class="... xximg"

在jquery中初始化

$(function () {

$('.xximg').xximg();

})

使用说明

自定义标签属性

插件识别的自定义标签属性以_xx_开头的属性

可用的属性如下：

_xx_width： 目标宽度 数值 或 parent 或 parent.parent

parent: 以父级为准

parent.parent 以父级的父级为准

_xx_height：目标高度 数值 或 parent 或 parent.parent

parent: 以父级为准

parent.parent 以父级的父级为准

_xx_mod：处理模式 目前支持两种:

elastic: 伸缩 图片会伸缩以达到全部显示出来，会留有旁白

cutting: 裁切 图片会伸缩调整到充满全部目标大小，在根据 xx_pos 的位置要求裁切

_xx_pos：裁切位置，取值0-1之间。 只有在 裁切 模式下有效，如：0.5， 按中间位置裁切

_xx_autoresize：自动响应resize事件 取值 on 是自动响应，其它都没自动响应resize事件

基本img标签如下:

注：原图将伸缩至合适大小，最终获取一张200*200的图片

注：原图将被裁切至合适大小，裁切位置为长边的开始位置，最终获取一张200*200的图片

这里说明的是，如果原图为竖图，xx_pos=0即为从上往下裁切。如果原图为横图，xx_pos=0即为从左往右裁切

注：这里没有指定_xx_width，则xximg会计算img本身宽作为目标宽度

js调用参数

基本用法如下即可：

$('.xximg').xximg();

初始时可设置参数如下：

backgroundColor： 旁白颜色，在有旁边时会体现，如：

白色：#FFFFFF

透明：rgba(255, 255, 255, 0)

start： 处理开始时的样式，如：{opacity: 0}，即处理开始时，将图片置为透明

end： 处理结束时的样式，如：{opacity: 1}，即处理结束后，将图片置为不透明

speed：处理结束时，动画时间(毫秒)

mod：处理模式，参数如 _xx_mod, 全局设置，当显式设置了xx_mod，以标签性属为准

pos： 裁切位置 参数如 _xx_pos, 全局设置，当显式设置了xx_pos，以标签性属为准

autoresize： 自动响应resize事件 参数如 _xx_autoresize, 全局设置，当显式设置了xx_autoresize，以标签性属为准

get_width：获到宽度的方法，高级使用接口，可自定义获到宽度的方法

get_height：获到高度的方法，高级使用接口，可自定义获到高度的方法

例:

$('.xximg').xximg({backgroundColor: 'rgba(255, 255, 255, 0) '});

设置透明背景

版本功能

v1.0 前端调整图片

参与贡献

Fork 本项目

新建 Feat_xxx 分支

提交代码

新建 Pull Request

码云特技

使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md

GVP 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目