李勇为您分享jQuery.imgAutoSize插件,解决图片自适应大小(以宽度)的问题,附图片垂直居中的方法。这里不用css处理图片自适应大小,那法子不太符合w3c标准,感兴趣的同学自行百度。
jQuery.imgAutoSize:图片自适应大小(以宽度)+图片垂直居中
jQuery.imgAutoSize:图片按宽度自适应大小
- // jQuery.imgAutoSize.js
- (function ($) {
- var loadImg = function (url, fn) {
- var img = new Image();
- img.src = url;
- if (img.complete) {
- fn.call(img);
- } else {
- img.onload = function () {
- fn.call(img);
- img.onload = null;
- };
- };
- };
- $.fn.imgAutoSize = function (padding) {
- var maxWidth = this.innerWidth() - (padding || 0);
- return this.find('img').each(function (i, img) {
- loadImg(this.src, function () {
- if (this.width > maxWidth) {
- var height = maxWidth / this.width * this.height,
- width = maxWidth;
- img.width = width;
- img.height = height;
- };
- });
- });
- };
- })(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。
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
文章评论 本文章有个评论