JS教程：imgAutoSize图片自适应大小(以宽度)+图片(文字)垂直居中

鲍余网络工程师为你分享：Query.imgAutoSize插件，解决图片自适应大小（以宽度）的问题，附图片垂直居中的方法。这里不用css处理图片自适应大小，那法子不太符合w3c标准，感兴趣的同学自行百度。

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.     };
16.     $.fn.imgAutoSize = function (padding) {
17.         var maxWidth = this.innerWidth() - (padding || 0);
18.         return this.find('img').each(function (i, img) {
19.             loadImg(this.src, function () {
20.                 if (this.width > maxWidth) {
21.                     var height = maxWidth / this.width * this.height,
22.                         width = maxWidth;
24.                     img.width = width;
25.                     img.height = height;
26.                 };
27.             });
28.         });
29.     };
31. })(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

深圳网站建设专家：鲍余网络
  ８年专注：网站设计、网站建设、网站开发、营销型网站建设、营销型网站设计、APP开发、软件开发、微信开发、公众号开发、互动营销、响应式网站建设开发、响应式网站、互联网形象设计、空间租用、域名注册、虚拟主机、服务器托管、网站维护等服务。

鲍余案例：稳健医疗、格力地产、珠海气象局、大昌行集团等知名企业

咨询热线：0755-3693 8799  

咨询QQ：8554 3483
联系人：鲍先生：

电话：185 7667 8080  

微信：185 7667 8080

地址：深圳市龙华新区民治大道沙元埔大厦12楼1205-1228室（民治地铁站D出口对面）

网址：www.zgbywl.com