`
化蝶自在飞
  • 浏览: 2334965 次
  • 性别: 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的后面!

相关推荐

    js控制页面内图片同宽比例缩小

    "js控制页面内图片同宽比例缩小"这个主题聚焦于如何利用JavaScript动态调整图片尺寸,确保图片在不同设备和屏幕尺寸下保持正确的比例,避免图片变形。这通常涉及到图像的响应式布局,是现代Web开发中的一个常见需求...

    JS实现控制图片显示大小的方法【图片等比例缩放功能】

    根据图片的原始宽高比和设定的最大尺寸,计算出一个缩放比例(Ratio),该比例将用来调整图片的宽度和高度。 4. 调整图片尺寸:使用计算出的缩放比例,分别调整图片对象的height和width属性。这样图片就能根据设定的...

    如何防止被图片“撑破”

    为了确保页面布局的一致性和美观性,我们需要采取一系列措施来控制图片的尺寸,避免其对页面布局造成负面影响。 #### 一、CSS方法 首先,我们可以通过CSS来限制图片的最大宽度,以确保图片不会超出指定的宽度限制...

    图片自动按比例缩小防止页面被图片撑破特效代码

    在网页设计中,图片是不可或缺的元素,它们可以为...以上这些技术结合使用,可以有效地实现图片自动按比例缩小,防止页面被图片撑破的效果。在实际应用中,我们需要根据具体项目需求和用户设备特性进行灵活组合和优化。

    js图片缩放效果制作鼠标滚动图片等比例缩放

    4. 设置图片样式:通过CSS控制图片的基础样式和布局。 5. 图片渲染优化:设置`image-rendering`属性保持图片清晰度。 以上就是利用JavaScript实现鼠标滚动时图片等比例缩放的详细解析,希望对你的项目有所帮助。

    实现DOM等比例宽高

    "实现DOM等比例宽高"这个话题主要关注如何让DOM元素在宽度改变时,高度能自动按比例调整,保持原有的纵横比,避免因宽高不匹配导致的元素变形。这个问题在处理图片、视频或自定义内容区域时尤其重要。 首先,我们...

    js控制图片左右滚动,可控制方向

    "js控制图片左右滚动,可控制方向"这个主题就是关于如何使用JavaScript来实现一个动态的图片滚动展示,让用户可以通过点击或触摸来控制图片的滚动方向。下面将详细阐述这一技术要点。 1. **JavaScript基础**:...

    JQuery控制图片大小代码

    总之,通过jQuery我们可以方便地控制图片的大小,适应不同的页面布局和设备需求。结合CSS样式和事件监听,可以实现更复杂的图片管理策略。记得在实际项目中,根据具体需求选择合适的方法,并注意性能优化,避免过度...

    jQuery等比例缩放大图片_大图片自适应页面布局

    "jQuery等比例缩放大图片_大图片自适应页面布局"的主题聚焦于如何利用jQuery库来解决大图片超出页面边界的问题,实现图片的等比例缩放,使其自适应页面布局。下面将详细介绍这两种方法,并探讨相关技术细节。 方法...

    鼠标滚轮切换图片js特效.zip

    本文将深入探讨“鼠标滚轮切换图片js特效”这一主题,这是利用JavaScript实现的一种图片切换效果,它使得用户可以通过鼠标滚轮或者键盘左右键来浏览一组图片,提供了一种直观且便捷的用户体验。 首先,我们要理解这...

    原生JS实现大图片按比例缩放.zip

    "原生JS实现大图片按比例缩放"就是一个这样的解决方案,它利用JavaScript语言来动态调整大图片的尺寸,确保它们按照比例适应网页的div容器。下面我们将详细探讨这个话题。 首先,我们需要理解CSS中的`width`和`...

    原生js鼠标滚轮及左右键盘控制图片自适应切换效果代码

    在JavaScript编程中,实现“原生js鼠标滚轮及左右键盘控制图片自适应切换效果”是一种常见的用户交互设计。这个功能允许用户通过鼠标滚轮或键盘的左右箭头键来浏览一组图片,同时确保图片在不同设备和屏幕尺寸上能够...

    JS 按图片比例截取中间部分 缩略图不失真

    "JS 按图片比例截取中间部分 缩略图不失真" 这个主题正是关于如何使用JavaScript来实现这样的功能。这个方法的关键在于保持图片的原始比例,避免拉伸或压缩导致的图像失真,同时,通过截取图片的中间部分,可以确保...

    js特效按钮控制图片左右自动滚动

    "js特效按钮控制图片左右自动滚动"这个主题就是关于如何利用JavaScript实现一个交互式的图片展示功能,让用户可以通过按钮控制图片在水平方向上自动或手动滚动。这个功能常用于产品展示、相册浏览等场景,为用户提供...

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

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

    js图片左右无缝滚动用鼠标控制图片滚动

    JavaScript图片左右无缝滚动是一种常见的网页动态效果,常用于展示多张图片并使用户可以通过鼠标操作来浏览。这种技术主要依赖JavaScript语言以及HTML和CSS来实现。以下是对这一知识点的详细说明: 1. **JavaScript...

    JS 按钮控制图片左右无缝滚动

    其中,“JS按钮控制图片左右无缝滚动”这一功能常用于网站轮播图、产品展示等场景,能够提升用户体验,使页面更加生动有趣。 #### 二、实现原理 此功能主要通过JavaScript控制DOM元素的CSS属性(如`left`或`...

    js的一些定位方法,常用于页面布局的使用

    ### JavaScript 页面布局定位方法 在Web开发中,页面布局是一个重要的环节,良好的布局不仅能够提升用户体验,还能增强网站的美观性和功能性。JavaScript作为前端开发的重要工具之一,在页面布局中的作用不可小觑。...

    JS编写的基于网页的图片浏览器

    这通常是通过计算图片的宽高比,并根据容器的尺寸调整图片大小来实现的。这样,无论用户的屏幕分辨率如何,图片都能以最佳方式呈现。 **小图导航设置** 类库中的小图导航功能是其亮点之一。它可以显示一组缩略图,...

    js图片网格布局点击图片放大预览效果代码.zip

    1. **图片布局**:首先,需要使用CSS创建一个网格布局,每个网格单元格内包含一张图片。可以使用`display: grid`或者`display: flex`来实现。CSS Grid布局允许自定义行和列的大小,而Flexbox更适合单轴布局。 2. **...

Global site tag (gtag.js) - Google Analytics