<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>
分享到:
相关推荐
等比缩放是指保持图片的长宽比不变,根据指定的容器大小来调整图片的尺寸。在CSS中,我们通常可以通过设置`max-width: 100%`和`height: auto`来实现这一效果,但有时需要更复杂的动态计算,特别是在响应式设计或者...
本文将详细介绍如何使用JavaScript来实现通过鼠标滚轮控制图片缩放效果的方法,其中将涉及onmousewheel事件的使用以及JavaScript操作DOM来调整图片大小的技巧。 首先,我们应当理解onmousewheel事件。这是一个鼠标...
本篇将详细介绍如何使用JavaScript实现图片的等比例缩放,并通过一个完整的示例来解析其工作原理。 首先,我们需要理解等比例缩放的基本概念。等比例缩放是指在调整图片大小时,保持其宽高比不变,避免图像变形。在...
- **静态布局**:早期网页设计中普遍采用的方法,使用固定单位如`px`来指定元素的大小与位置,但在不同分辨率下容易造成布局错乱。 - **流式布局**:为了解决静态布局的局限性,引入了百分比单位`%`来定义宽度,使...
另外,对于需要裁剪的图片,JavaScript库如`Cropper.js`提供了强大的图片裁剪功能,允许用户指定裁剪区域并生成相应裁剪后的图片数据。 "ImageAdapt-master"可能是一个用于图片适配的JavaScript插件,它可能包含...
- 图片等比缩放后,应保存缩放后的图片,以便下次使用时直接使用缩放后的图片,减少服务器计算量。 总结起来,本示例分别通过JavaScript和PHP展示了如何对数据库中的图片进行等比缩放,涉及到了前端JavaScript的DOM...
等比缩放会根据指定的宽度或高度,按照比例调整图片大小,而截取则可以在保持比例的前提下,选取图片的特定部分。这部分功能可能需要结合后端语言如PHP的图像处理函数来实现。 在实际应用中,Uploadify的配置非常...
在Vue框架中,实现图片按比例缩放是一个常见的需求,特别是在布局设计中,保持图片的原始比例至关重要,以免导致图片失真。以下是如何在Vue中处理这个问题的详细步骤和相关知识点: 1. **图片比例计算**: 当需要...
常见的方法有按比例缩放、等比缩放和非等比缩放。在编程中,可以通过设置目标尺寸或缩放因子来实现,保持图像原有宽高比的缩放可以避免图片变形。 3. **图片裁剪**: 裁剪图片是指选取图片的一部分并将其余部分...
在JavaScript开发中,图片展示和处理是一个常见的需求,特别是在网页设计和前端开发中。"canvas图像裁剪压缩旋转"这个主题涵盖了多个关键知识点,包括图片裁剪、缩放、滤镜应用以及旋转,这些都是实现动态图像操作的...