jQuery设置图片等比例缩小的方法


Posted in jQuery onApril 29, 2017

本文实例讲述了jQuery设置图片等比例缩小的方法。分享给大家供大家参考,具体如下:

网站的内容页面,经常要放图片,如果图片太大会撑出,影响页面美观。如果只是用css限制图片的最大宽度,会引起图片的变形,这里建议还是用js来实现,实现方式如下:

<script language="javascript" type="text/javascript">
window.onload = function () {
  //判断图片大小,超过一定宽度,要通过js定义图片大小
  $.each($(".sec-content img"), function (i, v) {
    if (v.width > 740)
    {
      v.width = 740; //重定义编辑器自带的宽度
      v.removeAttribute('height'); //移除编辑器自带的图片高度
    }
  });
}
</script>

注意,引用本方法前前先引入jQuery。$(".sec-content img")这里是文章内容中的图片筛选。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery列表检索功能实现代码
Jul 17 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现穿梭框效果
Jan 19 jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 #jQuery
jquery实现图片上传前本地预览
Apr 28 #jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 #jQuery
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 #jQuery
You might like
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
python对文件的操作方法汇总
2020/02/28 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
大学军训感言200字
2014/02/26 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
片区教研活动总结
2014/07/02 职场文书
css3新特性的应用示例分析
2022/03/16 HTML / CSS
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript