jQuery.imgAutoSize:图片自适应大小(以宽度)+图片(文字)垂直居中
李勇为您分享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。
注:相关网站建设技巧阅读请移步到建站教程频道。
>更多相关文章
- 03-23粉多多帝国CMS7.5 手机网站模板源码安装和调试
- 10-27网站运营思维决定企业盈利差距
- 06-07云指教你:免费建站怎么绑定自己的域名
- 06-07你花了5位数的自媒体头条值不值 看看这篇干货就知道了
- 06-07百度推广政策重大调整 推广位锐减70%
- 06-07百度搜索推广大幅调整的影响和应对策略
- 06-07新人选择搭建个人网站需要考虑的8个问题
- 06-07想要流量,那就扫出个十万(微信与QQ篇)
首页推荐
佛山市东联科技有限公司一直秉承“一切以用户价值为依归
- 01-11全球最受赞誉公司揭晓:苹果连续九年第一
- 12-09罗伯特·莫里斯:让黑客真正变黑
- 12-09谁闯入了中国网络?揭秘美国绝密黑客小组TA
- 12-09警示:iOS6 惊现“闪退”BUG
- 11-18LG新能源宣布与Bear Robotics达成合作,成为
- 11-18机构:三季度全球个人智能音频设备市场强势
- 11-18闲鱼:注册用户过6亿 AI技术已应用于闲置交
- 11-18美柚、宝宝树回应“涉黄短信骚扰”:未发现
- 11-01京东七鲜与前置仓完成融合
相关文章
24小时热门资讯
24小时回复排行
热门推荐
最新资讯
操作系统
黑客防御