`
化蝶自在飞
  • 浏览: 2304481 次
  • 性别: Icon_minigender_2
  • 来自: 武汉
社区版块
存档分类
最新评论

js控制图片宽高比例 js控制图片尺寸防止撑破页面布局

阅读更多
js控制图片宽高比例 js控制图片尺寸防止撑破页面布局.防止过大图片撑破页面.
代码中的 650 表示最大宽度,根据自己情况适当修改;article_content 表示图片外层容器的Id,需要你修改为自己的.兼容各浏览器,最主要的是不跟其他js库冲突,放上去就能用.
<script type="text/javascript">
function ImgZoom(Id)
{
	var w = Id.width;
	var m = 650;
	if(w < m)
	{
		return;
	}
	else
	{
		var h = Id.height;
		Id.height = parseInt(h*m/w);
		Id.width = m;
	}
}
void function(){
	var Imgs = document.getElementById("article_content").getElementsByTagName("img");
	for(i=0;i<Imgs.length;i++)
	{
		ImgZoom(Imgs[i]);
	}
}();
</script>

本代码在 http://www.k686.com/ 上测试使用正常.
分享到:
评论
1 楼 化蝶自在飞 2010-09-22  
此段代码放到需要控制的内容id的后面!

相关推荐

    漂亮的网站源码30个【华丽的JS特效+DIV控制布局】

    漂亮的网站整站源码30个【DIV控制布局+华丽的JS特效】 30个漂亮的网站源码 所有网站都采用CSS控制样式展现,没有table,都是DIV控制布局!更有一些网站有华丽丽的JS特效。 36个网站中包含了各行各业的网页设计,譬如...

    JavaScript等比例缩放图片控制超出范围的图片

    js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,软件开发网以稳定页面布局,本代码段就是完成...

    JavaScript画廊插件FlexImages.zip

    FlexImages 是一款轻量级的 ...通过CSS控制图片间距,可灵活调整。完整显示图片,不会裁剪图片,也不会打乱图片顺序。支持无限滚动支持图片和iframe内容懒加载可随意控制布局显示行数 标签:FlexImages

    jQuery鼠标控制图片滚动翻页.zip

    jQuery鼠标控制图片滚动翻页是一款jquery.gridnav网格图片列表排列布局鼠标按钮控制图片滚动翻页。

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ...

    JS+CSS联合打造图文结合动感菜单 JAVASCRIPT 经典漂亮图文menu

    未使用jquery,Mootools等Js框架,核心使用JavaScript实现,用CSS美化布局并控制元素,最终效果如Flash菜单一样,看上去动感十足,适合于黑色风格的主题网站,如果色调不适合你,你只需替换顶部图片以及修改CSS样式表...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    (3)针对页面自适应问题,本文结合渐进增强以及拥抱流式布局的思想,同时研究利用了移动设备的视口特性,实现跨分辨率、跨设备的页面自适应。 (4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台...

    HTML5全屏图片左右滑动轮播代码.zip

    HTML5全屏图片左右滑动轮播代码是一款全屏响应式图片轮播布局,按钮控制图片水平滑动预览查看,图片支持鼠标悬停文字动画展示特效。

    HTML3D轮播切换图片源码附注释.rar

    源码使用CSS属性+原生js代码实现图片轮播切换、图片整体跟随鼠标移动效果、图片整体鼠标滚轮控制缩放,使用的css属性包括:弹性盒布局元素居中、背景图片平铺尺寸设置、相对、绝对定位、滤镜效果、图片层级、边距...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. ...

    全屏图片视差切换Anime.js插件.zip

    全屏图片视差切换Anime.js插件是一款全屏响应式的图片元素布局,通过左右按钮控制图片视差旋转切换效果。

    精通CSS+DIV网页样式与布局视频教材

    1.3.3 控制图片 1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择器 2.1.2 类别选择器 2.1.3 ID选择器 2.2 选择器声明 2.2.1 集体声明 2.2.2 选择器的嵌套 2.3 ...

    《精通CSS+DIV网页样式与布局》光盘源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款基于...

    artDialog非常漂亮的弹窗JS库

    她支持多皮肤共存,这些皮肤的背景图片在页面载入时就会被缓存好,调用时几乎感觉不到延时。 细致的用户体验 她支持Esc快捷键关闭;如果对话框内容有输入控件她将支持Ctrl+Enter提交;智能给按钮添加焦点;小对话框...

    js游戏人物上下左右跑步效果.zip

    js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效。

    精通CSS.DIV.网页样式与布局 源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一...

    图片轮换(js+css)

    最近做站要用这个效果,效果不错。主要是css布局,js控制。

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    /js/all.js JavaScript脚本文件 /images 图片文件 第24章(/ch24) 程序描述:本章将使用Ajax技术实现无刷新即可浏览RSS的阅读器。添加一个RSS地址时,自动保存到数据库。打开阅读RSS时,自动获取...

    前端开发之走进Vue.js PPT.zip

    在前端开发中,会涉及到一些重要的前端技术栈,如vue.js、react.js、node.js、前端安全、react-native等。同时,也需要借助一些工具,如代码编辑工具(WebStorm、VS Code)、代码版本控制工具(Git、SVN)、代码包...

Global site tag (gtag.js) - Google Analytics