两个,JS实现自动按比例缩放图片,但一小BUG 要是图片在下载中,还是会和原先一样大,下载完后才会执行.如果网速慢的话,就会把页面撑地很大.
1、
<script language="JavaScript">
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 450/338){
if(image.width>450){
ImgD.width=450;
ImgD.height=(image.height*450)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>338){
ImgD.height=338;
ImgD.width=(image.width*338)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
</script>
〈IMG src="<%= url %>" onload="javascript:DrawImage(this);"〉
<script language="javascript">
function DImage(ImgD){
var image=new Image();
// alert(ImgD.src);
image.src= ImgD.src;
if(image.width>0 && image.height>0){
//flag=true;
if(image.height>=100){
ImgD.height=100;
ImgD.width=(image.width*100)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
</script>
〈img border="0" src="<%=info.getReserve2() %>" onload="javascript:DrawImage(this);"〉
分享到:
相关推荐
"js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...
- 按宽度缩放:保持图片的宽度与容器宽度相同,高度按比例缩放。 - 按高度缩放:保持图片的高度与容器高度相同,宽度按比例缩放。 选择哪种方式取决于设计需求,通常为了保持图片的原始比例,我们会优先考虑按...
本文将详细介绍如何使用JavaScript来实现图片的自动按比例缩放功能。 #### 二、核心代码解析 ```javascript function autoResizeImage(maxWidth, maxHeight, objImg) { var img = new Image(); img.src = objImg....
关于使用JavaScript实现图片等比例缩放功能,这是前端开发中常遇到的需求。图片等比例缩放是指在调整图片大小时,保持图片的宽高比不变,避免图片因缩放导致的变形。这种技术尤其在响应式网页设计中非常有用,可以...
在网页开发中,有时我们需要对图片进行按比例缩放,以适应不同的屏幕尺寸或保持页面布局的美观。本文将详细讲解如何使用JavaScript实现这一功能,并提供一个C#版本的代码作为参考。 首先,我们来看JavaScript的实现...
本文将详细解析如何使用 JavaScript 实现等比例缩放图片,以控制其超出预设范围。 首先,我们来看一段实现这一功能的 JavaScript 代码: ```html 等比例缩放图片 function DrawImage(ImgD, iwidth, iheight)...
在"99%CSS3+1%JS实现缩放图片展示特效"的项目中,开发者很可能是利用了上述技术的组合,创造出一种平滑且引人注目的图片展示方式。通过阅读同名博客,你可以更深入地了解每个步骤和具体实现细节,从而学习并应用到...
Pinchzoom.js通过监听这些手势,计算两个手指间的距离变化,进而调整图片的CSS transform属性,实现图片的平滑缩放。 在使用Pinchzoom.js之前,你需要在HTML文件中引入这个插件。通常,你可以将Pinchzoom.js的源...
以下是一个简单的JS函数示例,用于按比例缩放图片: ```javascript function scaleImage(imageElement, maxWidth, maxHeight) { var img = imageElement; var width = img.width; var height = img.height; if...
这个JS类库实现了自动按比例缩放图片的功能,确保无论图片的原始尺寸如何,都能适应预设的显示区域。这通常是通过计算图片的宽高比,并根据容器的尺寸调整图片大小来实现的。这样,无论用户的屏幕分辨率如何,图片都...
另外,JavaScript也可以通过改变图片元素的width和height属性来实现等比例或非等比例的缩放。对于响应式设计,CSS3的媒体查询可以确保图片在不同设备和屏幕尺寸下按需缩放。 在实际应用中,图片轮播和图片缩放往往...
- **JavaScript**:动态调整大小时,我们需要获取图片的原始尺寸和目标尺寸,然后根据这两个尺寸计算缩放比例。例如,可以使用`naturalWidth`和`naturalHeight`属性获取原始尺寸,然后计算新的宽度和高度。 ```...
<title>jQuery等比例缩放图片 body { margin: 0; padding: 0; } .box { width: 700px; margin: 0 auto; } .imgBox { background: #CCCCCC; /* 针对IE6的hack */ *display: table-cell; width: 400px...
例如,在Python中,可以使用PIL库的`resize()`函数按比例缩放图片: ```python from PIL import Image # 打开图片 img = Image.open('input.jpg') # 定义新的尺寸,以保持宽高比 new_size = (width * scale, ...
例如,容器可以设定固定宽度和高度,图片设置为`max-width: 100%`和`height: auto`,这将使图片按比例缩放,保持原始宽高比。 ```html .container { width: 300px; height: 200px; overflow: hidden; /* ...
有两种主要的缩放方法:按比例缩放(保持原始宽高比)和非比例缩放(可能会改变原始宽高比)。JavaScript可以通过操作DOM元素的样式属性,如`width`和`height`来实现图片的缩放。 在JavaScript中,我们可以获取到...
这个名为“图片轮播中自动缩放图片”的插件,专门针对PHPwind7.5设计,旨在解决图片在轮播展示时可能出现的显示变形问题。 1. **插件功能解析:** - **自动缩放**:该插件的核心功能是根据轮播区域的尺寸动态调整...
如果比例大于1或图片原始宽度大于600,就按比例缩放图片,并根据浏览器类型添加点击事件,使得图片在新窗口中打开。对于IE浏览器,它使用`outerHTML`属性替换图片元素为包含链接的图片元素;对于非IE浏览器,它通过...
本文将深入探讨如何使用JavaScript实现一个兼容各浏览器的图片旋转和缩放特效,以及涉及到的相关技术点。 首先,让我们了解JavaScript在图片处理中的作用。JavaScript是一种客户端脚本语言,它可以直接在用户的...