`
shirlly
  • 浏览: 1648369 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

当显示的图片超过指定的显示大小的时候,用js等比缩小图片

 
阅读更多
<img src="<%=rscontent("filepath")%>" onload="if(this.clientWidth>650) this.width=650; this.height=(this.clientHeight*this.width)/this.clientWidth; ">
<!--注意取得客户端的图片的宽:this.clientWidth取得其高:this.clientWidth注意JS是区分大小写的!控制客户端的宽用this.width控制客户端的高用:this.height-->
其中650就是指定的显示图片的大小

如果是编辑器中插入的图片在不能编辑其代码的情况下,可以通过下面的方法获取插入的图片的对象然后等比缩放图片
function  changeImagesSize(){  
		    var imageArray = document.getElementById("content").getElementsByTagName("img"); 
		    for(var i=0;i<imageArray.length;i++) 
		    {
		       if (imageArray[i].width>600) {
		          var srcWidth  = imageArray[i].width;
		          var srcHeight = imageArray[i].height;
		       	  imageArray[i].style.width="600px"; 
		       	  imageArray[i].style.height=(srcHeight*imageArray[i].width)/srcWidth; 
		       }  
		     
		    }
		}

只要在页面加载完后调用此方法即可
其中content是放置内容的document Element的ID
eg:
引用

<div class="post-body" id="content">
<s:property value="newsInfo.newsContent" escape="false" />
</div>
分享到:
评论

相关推荐

    JQuery实现等比缩放图片插件

    等比缩放是指保持图片的长宽比不变,根据指定的容器大小来调整图片的尺寸。在CSS中,我们通常可以通过设置`max-width: 100%`和`height: auto`来实现这一效果,但有时需要更复杂的动态计算,特别是在响应式设计或者...

    js实现鼠标滚轮控制图片缩放效果的方法

    本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...

    JS图片等比例缩放方法完整示例

    本篇将详细介绍如何使用JavaScript实现图片的等比例缩放,并通过一个完整的示例来解析其工作原理。 首先,我们需要理解等比例缩放的基本概念。等比例缩放是指在调整图片大小时,保持其宽高比不变,避免图像变形。在...

    PC、移动端自适应等比缩放布局方案

    - **静态布局**:早期网页设计中普遍采用的方法,使用固定单位如`px`来指定元素的大小与位置,但在不同分辨率下容易造成布局错乱。 - **流式布局**:为了解决静态布局的局限性,引入了百分比单位`%`来定义宽度,使...

    img图片大小适配插件

    另外,对于需要裁剪的图片,JavaScript库如`Cropper.js`提供了强大的图片裁剪功能,允许用户指定裁剪区域并生成相应裁剪后的图片数据。 "ImageAdapt-master"可能是一个用于图片适配的JavaScript插件,它可能包含...

    php和js对数据库图片进行等比缩放示例

    - 图片等比缩放后,应保存缩放后的图片,以便下次使用时直接使用缩放后的图片,减少服务器计算量。 总结起来,本示例分别通过JavaScript和PHP展示了如何对数据库中的图片进行等比缩放,涉及到了前端JavaScript的DOM...

    uploadify 3.0 上传 php批量上传 加水印和图片等比缩截取

    等比缩放会根据指定的宽度或高度,按照比例调整图片大小,而截取则可以在保持比例的前提下,选取图片的特定部分。这部分功能可能需要结合后端语言如PHP的图像处理函数来实现。 在实际应用中,Uploadify的配置非常...

    vue实现图片按比例缩放问题操作

    在Vue框架中,实现图片按比例缩放是一个常见的需求,特别是在布局设计中,保持图片的原始比例至关重要,以免导致图片失真。以下是如何在Vue中处理这个问题的详细步骤和相关知识点: 1. **图片比例计算**: 当需要...

    图片合并、缩放、裁剪、水印、防伪码、指纹

    常见的方法有按比例缩放、等比缩放和非等比缩放。在编程中,可以通过设置目标尺寸或缩放因子来实现,保持图像原有宽高比的缩放可以避免图片变形。 3. **图片裁剪**: 裁剪图片是指选取图片的一部分并将其余部分...

    canvas图像裁剪压缩旋转

    在JavaScript开发中,图片展示和处理是一个常见的需求,特别是在网页设计和前端开发中。"canvas图像裁剪压缩旋转"这个主题涵盖了多个关键知识点,包括图片裁剪、缩放、滤镜应用以及旋转,这些都是实现动态图像操作的...

Global site tag (gtag.js) - Google Analytics