jQuery.imgAutoSize:图片自适应大小(以宽度)+图片(文字)垂直居中

浏览:
字体:
发布时间:2016-06-07 13:28:06
来源:

李勇为您分享jQuery.imgAutoSize插件,解决图片自适应大小(以宽度)的问题,附图片垂直居中的方法。这里不用css处理图片自适应大小,那法子不太符合w3c标准,感兴趣的同学自行百度。

jQuery.imgAutoSize:图片自适应大小(以宽度)+图片垂直居中
jQuery.imgAutoSize:图片自适应大小(以宽度)+图片垂直居中

jQuery.imgAutoSize:图片按宽度自适应大小

  1. // jQuery.imgAutoSize.js
  2. (function ($) {
  3.     var loadImg = function (url, fn) {
  4.         var img = new Image();
  5.         img.src = url;
  6.         if (img.complete) {
  7.             fn.call(img);
  8.         } else {
  9.             img.onload = function () {
  10.                 fn.call(img);
  11.                 img.onload = null;
  12.             };
  13.         };
  14.     };
  15.     $.fn.imgAutoSize = function (padding) {
  16.         var maxWidth = this.innerWidth() - (padding || 0);
  17.         return this.find('img').each(function (i, img) {
  18.             loadImg(this.src, function () {
  19.                 if (this.width > maxWidth) {
  20.                     var height = maxWidth / this.width * this.height,
  21.                         width = maxWidth;
  22.                     img.width = width;
  23.                     img.height = height;
  24.                 };
  25.             });
  26.         });
  27.     };
  28. })(jQuery);

使用方法:

$('.imgWrap').imgAutoSize();

注意事项:

1、如果要控制图片与容器的边距,如30像素: $('.imgWrap').imgAutoSize(30);2、 .imgWrap这个是图片外部容器,使用了本插件后超大的图片宽度将会限制在容器宽度。

强迫症!图片也垂直居中(文字也适用)

一般来说,按照上面的方法就能很好的达到预期效果了,我是个有强迫症的人,没办法,垂直方向也居中吧。。。  

*{margin:0 auto}.midWrap{display:table-cell;vertical-align:middle;width:200px;height:200px;line-height:200px/*文字/图片垂直居中*/}.imgWrap{display:block;max-width:100%}

注意事项:

1、html中img标签不要设置width和height;2、css中line-height需要定义宽度和高度,不要忘记设置行高;3、img要放在div盒子里,否则无效;4、文字垂直居中.midWrap中需要加入这条属性vertical-align:middle

注:相关网站建设技巧阅读请移步到建站教程频道。

>更多相关文章
24小时热门资讯
24小时回复排行
资讯 | QQ | 安全 | 编程 | 数据库 | 系统 | 网络 | 考试 | 站长 | 关于东联 | 安全雇佣 | 搞笑视频大全 | 微信学院 | 视频课程 |
关于我们 | 联系我们 | 广告服务 | 免责申明 | 作品发布 | 网站地图 | 官方微博 | 技术培训
Copyright © 2007 - 2024 Vm888.Com. All Rights Reserved
粤公网安备 44060402001498号 粤ICP备19097316号 请遵循相关法律法规
');})();