汇海网络工程师为你分享：Query.imgAutoSize插件，处理图片自顺应巨细（以宽度）的成绩，附图片垂直居中的要领。这里不消css处置惩罚图片自顺应巨细，那办法不太切合w3c尺度，感兴味的同窗自行百度。

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. = function () {
10. fn.call(img);
11. img. = 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

保举阅读：JS教程：10条建议让你编写的jquery代码运转速度更快

以上【JS教程：imgAutoSize图片自顺应巨细+图片垂直居中】由沈阳网站建立汇海网络整理公布，转载请注明出处：；更多关于网站设计、网站建立案例、营销型网站建立、营销型网站设计、呼应式网站建立开发办事器托管、网站维护等互联网使用办事，请致电：188 423 88900（7*24，何先生）。