首页 > 代码库 > 让页面上图片不变形
让页面上图片不变形
很多列表图片的原图超过指定大小,然而图片本身高宽比例不是固定的,因此在设置此类情况时最好的处理方式是使用js来固定图片大小并保证图片居中,且让图片不变形。
js代码:
1: /******************************************************************/
2: /******将图片居中,在图片外面嵌套一个div不设置任何样式*************/
3: /******参数:图片最大宽度,图片最大高度,******/
4: /******调用方法:$(‘.class‘).centerImage({MaxWidth:190,MaxHeight:135})*************/
5: /******************************************************************/
6: (function ($) {
7: $.fn.centerImage = function (options) {
8: var opts = $.extend({}, {
9: MaxWidth: 190, MaxHeight: 135
10: }, options);
11: var img = new Image(); //创建一个Image对象,实现图片的预下载
12: img.src = http://www.mamicode.com/$(this).attr(‘src‘);
13: var oldImg = $(this);
14: if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
15: SetImageCenter(img, oldImg, opts);
16: return; // 直接返回,不用再处理onload事件
17: } else {
18: img.onload = function () { //图片下载完毕时异步调用callback函数。
19: SetImageCenter(img, oldImg, opts); //将回调函数的this替换为Image对象
20: };
21: }
22: }
23: function SetImageCenter(img, imgold, opts) {
24: var iwidth = opts.MaxWidth;
25: var iheight = opts.MaxHeight;
26: //设置图片的高宽
27: if (img.width > 0 && img.height > 0) {
28: if (img.width / img.height >= iwidth / iheight) {
29: if (img.width > iwidth) {
30: imgold.css({ width: iwidth, height: (img.height * iwidth) / img.width });
31: } else {
32: imgold.css({ width: img.width, height: img.height });
33: }
34: } else {
35: if (img.height > iheight) {
36: imgold.css({ width: (img.width * iheight) / img.height, height: iheight });
37: } else {
38: imgold.css({ width: img.width, height: img.height });
39: }
40: }
41: }
42: //设置图片外层div的margin-top和margin-left
43: var div = imgold.parent(); //获取包含本图片的div
44: if (imgold.height() < iheight) {
45: var top = (iheight - imgold.height()) / 2;
46: div.css(‘margin-top‘, top + ‘px‘);
47: }
48: if (imgold.width() < iwidth) {
49: var left = (iwidth - imgold.width()) / 2;
50: div.css(‘margin-left‘, left + ‘px‘);
51: }
52: }
53: })(jQuery);
54:
需要使用jq1.7.2以上。
调用方式:
1: $("img[flag=img]").each(function (){
2: $(this).centerImage({ MaxWidth: 190, MaxHeight: 135 });
3: });
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。